QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 導航菜單 > swiper仿阿里云官網導航圖片切換代碼

综合分布图3d走势图带连线: VIP商用 swiper仿阿里云官網導航圖片切換代碼

swiper.js基于animate動畫庫制作阿里云官網頂部導航菜單和banner圖片切換結合布局代碼。
分享到微信朋友圈
X
[聲明]該素材是本站付費買斷的作品代碼,享受著作權?;?,未經允許請勿轉載,否則追究相應的法律責任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="statics/css/animate.min.css" />
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代碼

<div class="top">
	<div class="bar">
		<div class="logo">
			<img src="statics/images/logo.png" />
		</div>
		<div class="bar_menu">
			<ul>
				<li>
					<a href="#"><i></i> 購物車</a>
				</li>
				<li>
					<a href="#">控制臺</a>
				</li>
				<li>
					<a href="#">文檔</a>
				</li>
				<li>
					<a href="#">備案</a>
				</li>
				<li>
					<a href="#">郵箱</a>
				</li>
				<li>
					<a href="#">登錄</a>
				</li>
			</ul>
		</div>
		<div class="area">
			<span>中國站 <i></i></span>
			<ul>
				<li>
					<a href="#">
						<span class="nav-site">中國</span>
						<span class="nav-lang">簡體中文</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">International</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">簡體中文</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">???</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">繁體中文</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">Deutsch</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site"></span>
						<span class="nav-lang">Fran?ais</span>
					</a>
				</li>
				<li class="line"></li>
				<li>
					<a href="#">
						<span class="nav-site">Australia</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">Malaysia</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">Singapore</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">United States</span>
						<span class="nav-lang">English</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">中國香港</span>
						<span class="nav-lang">繁體中文</span>
					</a>
				</li>
				<li>
					<a href="#">
						<span class="nav-site">中國臺灣</span>
						<span class="nav-lang">繁體中文</span>
					</a>
				</li>

				<li>
					<a href="#">
						<span class="nav-site">日本</span>
						<span class="nav-lang">日本語</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="search">
			<input type="text" name="keyword" placeholder="ECS" />
			<div class="search_icon"></div>
		</div>
	</div>
	<div class="nav">
		<ul>
			<li>
				<a href="#">最新活動</a>
			</li>
			<li>
				<a href="#">產品</a>
			</li>
			<li>
				<a href="#">解決方案</a>
				<div class="son">
					<div class="list">
						<h4 class="title">通用解決方案</h4>
						<p>
							<a href="#">網站</a>
						</p>
						<p>
							<a href="#">IPv6<i>NEW</i></a>
						</p>
						<p>
							<a href="#">企業互聯網架構</a>
						</p>
						<p>
							<a href="#">網絡<i>NEW</i></a>
						</p>
						<p>
							<a href="#">云存儲</a>
						</p>
						<p>
							<a href="#">遷移</a>
						</p>
						<p>
							<a href="#">區塊鏈<i>HOT</i></a>
						</p>
						<p>
							<a href="#">SAP 云</a>
						</p>
						<p>
							<a href="#">VMware 云<i>NEW</i></a>
						</p>
						<p>
							<a href="#">智能客服</a>
						</p>
						<p>
							<a href="#">AIOps故障管理</a>
						</p>
						<p>
							<a href="#">企業效能</a>
						</p>
						<p>
							<a href="#">容器服務深度學習</a>
						</p>
						<p>
							<a href="#">數據傳輸</a>
						</p>
						<p>
							<a href="#">數據庫災備</a>
						</p>
						<p>
							<a href="#">企業級分布式數據庫<i>NEW</i></a>
						</p>
						<p>
							<a href="#">可信數字內容版權服務<i>NEW</i></a>
						</p>
						<p>
							<a href="#">移動研發平臺</a>
						</p>
						<p>
							<a href="#">釘釘小程序</a>
						</p>
						<p>
							<a href="#">短視頻</a>
						</p>
					</div>
					<div class="list">
						<h4 class="title">行業解決方案</h4>
						<p>
							<a href="#">新零售<i>HOT</i></a>
						</p>
						<p>
							<a href="#">新金融</a>
						</p>
						<p>
							<a href="#">新制造</a>
						</p>
						<p>
							<a href="#">新能源</a>
						</p>
						<p>
							<a href="#">新技術</a>
						</p>
						<p>
							<a href="#">智能工業</a>
						</p>
						<p>
							<a href="#">大游戲</a>
						</p>
						<p>
							<a href="#">大視頻</a>
						</p>
						<p>
							<a href="#">大傳媒</a>
						</p>
						<p>
							<a href="#">大健康</a>
						</p>
						<p>
							<a href="#">大政務<i>HOT</i></a>
						</p>
						<p>
							<a href="#">體育</a>
						</p>
						<p>
							<a href="#">交通物流</a>
						</p>
						<p>
							<a href="#">教育</a>
						</p>
						<p>
							<a href="#">房地產</a>
						</p>
						<p>
							<a href="#">汽車</a>
						</p>
					</div>
					<div class="list">
						<h4 class="title">安全解決方案</h4>
						<p>
							<a href="#">等保合規安全</a>
						</p>
						<p>
							<a href="#">新零售安全</a>
						</p>
						<p>
							<a href="#">政務云安全</a>
						</p>
						<p>
							<a href="#">互聯網金融安全</a>
						</p>
						<p>
							<a href="#">游戲安全</a>
						</p>
						<p>
							<a href="#">社交/媒體spam</a>
						</p>
						<p>
							<a href="#">混合云態勢感知</a>
						</p>
					</div>
					<div class="list">
						<h4 class="title">大數據解決方案</h4>
						<p>
							<a href="#">智慧場館<i>NEW</i></a>
						</p>
						<p>
							<a href="#">智能設備搜索</a>
						</p>
						<p>
							<a href="#">大數據倉庫</a>
						</p>
						<p>
							<a href="#">云上數據集成</a>
						</p>
						<p>
							<a href="#">臺風路徑分析</a>
						</p>
						<p>
							<a href="#">工業大數據服務</a>
						</p>
						<p>
							<a href="#">企業數據服務</a>
						</p>
						<p>
							<a href="#">智能旅游</a>
						</p>
						<p>
							<a href="#">手機數據</a>
						</p>
						<p>
							<a href="#">VR應用開發</a>
						</p>
					</div>
				</div>

			</li>
			<li>
				<a href="#">定價</a>
			</li>
			<li>
				<a href="#">ET大腦</a>
			</li>
			<li>
				<a href="#">數據智能</a>
			</li>
			<li>
				<a href="#">安全</a>
			</li>
			<li>
				<a href="#">云市場</a>
			</li>
			<li>
				<a href="#">支持與服務</a>
			</li>
			<li>
				<a href="#">合作伙伴</a>
			</li>
		</ul>
		<a class="register" href="#">免費注冊</a>
	</div>
	<div class="banner">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide blue-slide" style="background: #3857AD;">
					<img src="statics/images/banner1.jpg" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
				<div class="swiper-slide blue-slide" style="background: #24282c;">
					<img src="statics/images/banner2.jpg" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
				<div class="swiper-slide blue-slide" style="background: #24282c;">
					<div class="info ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
						<h1>表格存儲TableStore 升級發布會</h1>
						<p>更加靈活的查詢能力與數據實時消費通道</p>
						<a href="#">了解更多-></a>
					</div>
					<img src="statics/images/banner3_bg.jpg" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
				<div class="swiper-slide blue-slide" style="background: #24282c;">
					<div class="info ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
						<h1>Cloud Toolkit 全新升級支持 RDS MySQL</h1>
						<p>插件自動化部署,大幅提升開發部署效率</p>
						<a href="#">了解更多-></a>
					</div>
					<img src="statics/images/banner4_bg.png" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
				<div class="swiper-slide blue-slide" style="background: #24282c;">
					<div class="info ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
						<h1>消息隊列(MQ )全產品線升級</h1>
						<p>發布AMQP,兼容開源RabbitMQ,支持HTTP協議,推出7種多語言客戶端</p>
						<a href="#">了解更多-></a>
					</div>
					<img src="statics/images/banner5_bg.jpg" swiper-animate-effect="fadeInUp" class="ani" />
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</div>
	<div class="recommend">
		<ul>
			<li>
				<a href="#">
					<h2>云服務器特惠</h2>
					<p>限時5折,降低采購和運維成本,助力中小企業成長</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>Hi購季特權</h2>
					<p>“按月付款+包年折扣”兩者兼得,兩成首付輕松上云</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>阿里云 IoT</h2>
					<p>《智造將來》傳遞科技溫暖,智能人居平臺助力養老科技</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>DataWorks流計算平臺</h2>
					<p>支持DAG與SQL模式互相轉換,可視化拖拽開發實時計算</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>MongoDB游戲解決方案</h2>
					<p>完備的部署形態,適配多種游戲架構</p>
				</a>
			</li>
		</ul>
	</div>
</div>

<script>
	var mySwiper = new Swiper('.swiper-container', {
		loop: true,
		effect: 'fade',
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
		autoplay: {
			delay: 5000, //1秒切換一次
		},
		on: {
			init: function() {
				swiperAnimateCache(this); //隱藏動畫元素 
				this.emit('slideChangeTransitionEnd'); //在初始化時觸發一次slideChangeTransitionEnd事件
			},
			slideChangeTransitionEnd: function() {
				swiperAnimate(this); //每個slide切換結束時運行當前slide動畫
			}
		}
	});
</script>
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 中国福彩快乐十分开奖分布图

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了