QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > swiper仿阿里云官网导航图片切换代码

原创商用 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天

知道了
购彩堂 www.196691.com-乘风网彩票-| www.165727.com-中彩在线官网时时彩| www.280806.com-时时彩官方网网址| www.459918.com-彩世界邀请码| www.587277.com-彩票平台漏洞刷钱| www.729110.com-彩16官网正版下载| www.815312.com-体彩中彩网-| www.944879.com-买快三输的很惨的| 500彩票www.50080k.com| www.90hx.com-博彩app违法吗| www.381789.com-我精彩的鲨鱼视频| www.601048.com-彩票跟那期好| www.99511.com-三分时时彩计划预测| www.217300.com-彩票指南报-| www.gu30.com-福彩店转让-| www.621301.com-779时时彩-| www.736491.com-彩虹六号ela| www.819628.com-彩票研究群-| www.893349.com-七乐彩360-| www.959691.com-盈彩网下载-| 亚洲彩票联盟www.838669.com| www.up29.com-福彩山地走势| www.13hs.com-今日福彩3d谜语| www.365058.com-双色球爱彩-| www.443755.com-手机掌上百胜彩票| www.755712.com-福彩3d幸运鑫推荐| www.885870.com-体彩中心投诉电话| www.968116.com-宁夏中卫福彩中心| www.cp484.com-福建快三遗漏号码| www.246605.com-福彩开奖时间每周几| www.572515.com-彩形声字-| www.25277.cc-苹果彩铅-| www.608196.com-赵立群彩票-| www.3472.vip-快三爱彩乐开奖| www.168643.com-时时彩高手方案| www.0xj.com-天天彩应用下载| www.5411.com-福彩神8-| www.920291.com-hpc好彩票-| 大赢家彩票平台www.370583.com| www.93hb.com-希腊有彩票吗| www.311138.com-福彩3d走开奖结果| www.611576.com-福彩快三可以赢钱吗| www.c02.net-快开彩骗局-| www.969669.com-是福彩好还是体彩好| www.kx60.com-江苏快三走势图查询| www.i81.top-3d乐彩论-| www.722250.com-3cp玩彩票-| www.868006.com-七星彩票论坛开心网| www.981428.com-足彩任九奖金怎么算| www.br09.com-至尊快三-| www.24pt.com-中国体彩网11选5| www.2638.cn-22时时彩平台| www.082206.com-黑彩预测网站| www.155438.com-网上微彩彩票靠谱吗| www.19fj.com-大发5分彩开奖| www.98kn.com-微信群黑彩-| www.549527.com-网易彩票旧版首页| www.630076.com-金阳彩票乐娱平台| www.745489.com-湖北体彩手机在线| www.842877.com-微博怎么买足彩| www.903716.com-9万彩票app-| www.969078.com-天天彩票网安全吗| 13e彩票www.373970.com| www.i54.org-微彩会彩票下载| www.04iy.com-画彩铅人物用什么纸| www.358.cc-体彩排列3双彩论坛| www.5164.net-新管家彩图图片| www.657927.com-体彩电视走势图| www.751592.com-购彩信誉平台| www.828658.com-578彩票官网| www.900653.com-爱彩乐是啥-| www.970914.com-彩票真能中奖| 亚洲www.788257.com| www.4368.in-时时彩购买技巧| www.016364.com-彩票选号k线图| www.088783.com-福彩门户地址| www.189144.com-内蒙快三投注| www.272162.com-心冲吉林快三计划| www.843234.com-澳客足彩手机网| www.917837.com-重庆14彩开奖号码| 环球彩票www.hqcp9.com| www.io26.com-微彩娱乐app下载| www.n40.com-山西福彩二十分钟| www.980551.com-附近福彩店有哪些| www.pe51.com-5分快三是不是假的| www.05oq.com-体彩排列三跨度遗漏| www.87xv.com-快三推荐代码是什么| www.ht25.com-江苏体育彩票七位数| www.599409.com-吉林快三胆码预测| www.3938.cm-足球竞彩半全场结果| www.128735.com-福彩刮刮卡中奖图片| www.220617.com-彩神几个官网| www.pg33.com-彩票开奖直播频道| www.w00.org-福彩广告词-| www.74gk.com-彩票的各种漏洞| www.02ap.com-免费御彩轩计划账号| www.nr70.com-河北11选五爱乐彩| www.34519.com-福利三分彩-| www.033630.com-竞彩彩店宝app| www.188796.com-内蒙快三中奖金额| www.184899.com-吉林快三奖号| www.325307.com-海南私彩规律| www.522990.com-彩票套彩方法大全| www.676.hk-彩票多少钱需要交税| www.013408.com-重庆时彩现在开奖| www.407342.com-浙讧体彩20选5| www.9dj.cc-网上买彩票领奖流程| www.22978.com-彩乐漂-| www.686894.com-中彩那天教案一等奖| www.862517.com-纵横彩票江苏快三| 福彩www.16878c.com| www.820938.com-一吨彩钢卷价格| www.1520.site-火红彩票网官网| www.621142.com-和红旗彩票类似的| www.340142.com-手机买时时彩犯法吗| www.502331.com-博彩金手指报纸官网| www.43184.com-一些微信做中彩网的| www.86275.com-足彩2串1中奖概率| www.031385.com-玖玖彩票的骗局| www.18851.com-福建体彩网22选5| www.152507.com-双色球彩之网| www.897034.com-八八彩票登录| www.972225.com-彩票开奖查查询| www.iw36.com-竞彩比分直播新浪| www.028231.com-鸿彩网可靠吗| www.686263.com-中国体彩福彩| www.813949.com-江苏快三杀码| www.963067.com-三d彩神通预测| www.461896.com-福彩开奖排五玩法| www.559777.com-冀彩宝客户端下载| www.657362.com-旺彩开奖软件大全| www.731068.com-胜负彩任九开奖结果| www.833037.com-双色球彩票助手软件| www.892369.com-彩票榜官网登录| www.948102.com-福利彩票的发行宗旨| www.984373.com-下载福彩彩宝网| www.cp414.com-江苏快三下载| www.kj98.com-网易快三彩票| www.xk96.com-聚鑫彩票可靠不| www.6084.cm-彩票全包打法| www.12351.cc-96彩票app-| www.309268.com-彩票平台刷流水真假| www.398567.com-七星彩几点开在哪看| www.508156.com-唐龙快递彩票报| www.259718.com-时时彩平台官方网| www.363827.com-彩迷葫芦弟5号视频| www.527460.com-078彩票一总经销| www.654994.com-辣椒够力七星彩表| www.3726.vip-香港有线球彩台| www.675714.com-彩票驿站活动| www.779267.com-七星彩粟开奖结果| www.874046.com-体育彩票排5走势图| www.962420.com-福利彩票怎么随机买| www.cai27.com-江西快三走势图| www.1874.com-彩票机器人-| www.90uk.com-彩83彩票网址| www.09sl.com-彩票699网站| www.1563.vip-彩票榜邀请码哪里看| www.8812.in-阿里彩票登录网址| www.63329.cc-竞彩赛事公告| www.0707.vip-易彩堂8-| www.8434.vip-魔方彩票正规吗| www.627500.com-彩票5000万网站| www.72660.com-体彩大乐透预测专家|