swiper仿阿里云網(wǎng)站導(dǎo)航圖片切換代碼

swiper.js基于animate動畫庫制作阿里云網(wǎng)站頂部導(dǎo)航菜單和banner圖片切換結(jié)合布局代碼。

使用方法：

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="#">產(chǎn)品</a>
			</li>
			<li>
				<a href="#">解決方案</a>
				<div class="son">
					<div class="list">
						<h4 class="title">通用解決方案</h4>
						<p>
							<a href="#">網(wǎng)站</a>
						</p>
						<p>
							<a href="#">IPv6<i>NEW</i></a>
						</p>
						<p>
							<a href="#">企業(yè)互聯(lián)網(wǎng)架構(gòu)</a>
						</p>
						<p>
							<a href="#">網(wǎng)絡(luò)<i>NEW</i></a>
						</p>
						<p>
							<a href="#">云存儲</a>
						</p>
						<p>
							<a href="#">遷移</a>
						</p>
						<p>
							<a href="#">區(qū)塊鏈<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="#">企業(yè)效能</a>
						</p>
						<p>
							<a href="#">容器服務(wù)深度學(xué)習(xí)</a>
						</p>
						<p>
							<a href="#">數(shù)據(jù)傳輸</a>
						</p>
						<p>
							<a href="#">數(shù)據(jù)庫災(zāi)備</a>
						</p>
						<p>
							<a href="#">企業(yè)級分布式數(shù)據(jù)庫<i>NEW</i></a>
						</p>
						<p>
							<a href="#">可信數(shù)字內(nèi)容版權(quán)服務(wù)<i>NEW</i></a>
						</p>
						<p>
							<a href="#">移動研發(fā)平臺</a>
						</p>
						<p>
							<a href="#">釘釘小程序</a>
						</p>
						<p>
							<a href="#">短視頻</a>
						</p>
					</div>
					<div class="list">
						<h4 class="title">行業(yè)解決方案</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="#">新技術(shù)</a>
						</p>
						<p>
							<a href="#">智能工業(yè)</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="#">大政務(wù)<i>HOT</i></a>
						</p>
						<p>
							<a href="#">體育</a>
						</p>
						<p>
							<a href="#">交通物流</a>
						</p>
						<p>
							<a href="#">教育</a>
						</p>
						<p>
							<a href="#">房地產(chǎn)</a>
						</p>
						<p>
							<a href="#">汽車</a>
						</p>
					</div>
					<div class="list">
						<h4 class="title">安全解決方案</h4>
						<p>
							<a href="#">等保合規(guī)安全</a>
						</p>
						<p>
							<a href="#">新零售安全</a>
						</p>
						<p>
							<a href="#">政務(wù)云安全</a>
						</p>
						<p>
							<a href="#">互聯(lián)網(wǎng)金融安全</a>
						</p>
						<p>
							<a href="#">游戲安全</a>
						</p>
						<p>
							<a href="#">社交/媒體spam</a>
						</p>
						<p>
							<a href="#">混合云態(tài)勢感知</a>
						</p>
					</div>
					<div class="list">
						<h4 class="title">大數(shù)據(jù)解決方案</h4>
						<p>
							<a href="#">智慧場館<i>NEW</i></a>
						</p>
						<p>
							<a href="#">智能設(shè)備搜索</a>
						</p>
						<p>
							<a href="#">大數(shù)據(jù)倉庫</a>
						</p>
						<p>
							<a href="#">云上數(shù)據(jù)集成</a>
						</p>
						<p>
							<a href="#">臺風(fēng)路徑分析</a>
						</p>
						<p>
							<a href="#">工業(yè)大數(shù)據(jù)服務(wù)</a>
						</p>
						<p>
							<a href="#">企業(yè)數(shù)據(jù)服務(wù)</a>
						</p>
						<p>
							<a href="#">智能旅游</a>
						</p>
						<p>
							<a href="#">手機數(shù)據(jù)</a>
						</p>
						<p>
							<a href="#">VR應(yīng)用開發(fā)</a>
						</p>
					</div>
				</div>

			</li>
			<li>
				<a href="#">定價</a>
			</li>
			<li>
				<a href="#">ET大腦</a>
			</li>
			<li>
				<a href="#">數(shù)據(jù)智能</a>
			</li>
			<li>
				<a href="#">安全</a>
			</li>
			<li>
				<a href="#">云市場</a>
			</li>
			<li>
				<a href="#">支持與服務(wù)</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 升級發(fā)布會</h1>
						<p>更加靈活的查詢能力與數(shù)據(jù)實時消費通道</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>插件自動化部署，大幅提升開發(fā)部署效率</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 ）全產(chǎn)品線升級</h1>
						<p>發(fā)布AMQP，兼容開源RabbitMQ，支持HTTP協(xié)議，推出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>云服務(wù)器特惠</h2>
					<p>限時5折，降低采購和運維成本，助力中小企業(yè)成長</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>Hi購季特權(quán)</h2>
					<p>“按月付款+包年折扣”兩者兼得，兩成首付輕松上云</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>阿里云 IoT</h2>
					<p>《智造將來》傳遞科技溫暖，智能人居平臺助力養(yǎng)老科技</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>DataWorks流計算平臺</h2>
					<p>支持DAG與SQL模式互相轉(zhuǎn)換，可視化拖拽開發(fā)實時計算</p>
				</a>
			</li>
			<li>
				<a href="#">
					<h2>MongoDB游戲解決方案</h2>
					<p>完備的部署形態(tài)，適配多種游戲架構(gòu)</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'); //在初始化時觸發(fā)一次slideChangeTransitionEnd事件
			},
			slideChangeTransitionEnd: function() {
				swiperAnimate(this); //每個slide切換結(jié)束時運行當前slide動畫
			}
		}
	});
</script>

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請勿用于商業(yè)用途，會員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統(tǒng)商業(yè)用途請預(yù)先授權(quán)。

查看演示下載資源

0 20613 111

軟件 Dreamweaver
格式 HTML
作者迷茫
版權(quán) ? 原創(chuàng)商用（獨家） i

版權(quán)聲明

此作品是由17素材網(wǎng)簽約用戶上傳，17素材網(wǎng)擁有版權(quán)；未經(jīng)17素材網(wǎng)書面授權(quán)，請勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權(quán)；

17素材網(wǎng)尊重知識產(chǎn)權(quán)，如知識產(chǎn)權(quán)權(quán)利人認為平臺內(nèi)容涉嫌侵權(quán)，可通過郵件：3264130392@qq.com提出書面通知，我們將及時處理。

網(wǎng)站提供的黨政主題相關(guān)內(nèi)容（國旗、國徽、黨徽...），目的在于配合國家政策宣傳，僅限個人學(xué)習(xí)分享使用，禁止用于任何廣告和商用目的。