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.720797.com-中彩票领奖图片| www.067600.com-体育彩票店有假的吗| www.890305.com-胜负彩360-| www.70sh.com-省福彩中心-| www.623281.com-春秋彩票输了返钱吗| www.037007.com-九州彩票下载安装| www.662207.com-聚富网彩票-| www.984214.com-广东彩票手机版| www.26332.com-长春体彩网-| www.7292.loan-谁有彩虹电视直播源| www.135817.com-竞彩让球胜平负推荐| www.bm38.com-大发快三下载注册| www.1072.vip-时时彩改倍率骗局| www.219693.com-好彩网牛彩-| www.215778.com-湖北快三肖立刚推荐| www.328330.com-电子游艺平台送彩金| www.414400.com-出彩的同义词| www.518590.com-安徽福彩中心主任| www.845483.com-台湾有多少种彩票| www.959893.com-1305彩票下载| 大赢家彩票平台www.376357.com| www.354488.com-福建体育彩开奖结果| www.126243.com-有红包雨的彩票平台| www.327.live-中国传统色彩名称| www.592527.com-小白彩票下载| www.ws53.com-快三20分钟-| www.079003.com-海南七星彩杀码平台| www.835398.com-联盟黄金炫彩| www.930253.com-体彩竞彩兑奖期限| www.995906.com-体彩竞彩加奖| www.ge82.com-快捷彩票app| www.36542.cc-福彩2013035| www.968154.com-彩票骗了多少人| www.kt.cc-皇都彩票真的吗| www.sf75.com-重庆时时彩软件苹果| www.305325.com-七星彩历史查询器| 彩71www.005845.com| www.448997.com-福彩主任视频| www.75qp.com-彩票运势测号| www.458128.com-七月彩票走向| www.817367.com-彩票77不给提现| www.727000.com-苹果体彩软件| www.824667.com-68彩票评论-| www.50cd.com-中国足彩在线官网| www.055446.com-吉林快三五天走势图| www.558915.com-生日祝福彩虹屁| www.681519.com-辽宁彩票发行中心| www.565505.com-九州体育博彩| www.31317.cc-麒麟彩票网-| www.22710.com-cp彩票可靠吗| www.79668.com-体彩加盟提成| www.038266.com-手机app彩票| www.122124.com-希腊时时彩开奖软件| www.006647.cc-5分⑥和彩开奖| www.479966.com-澳门分分彩开奖记录| www.350538.com-彩色铅笔画-| www.507792.com-老徐说彩今日p3| www.39157.cc-万富彩票-| www.485.biz-体彩交流群-| www.cb53.com-黑彩庄家盈利吗| www.3328.in-彩色漫画不要马赛克| www.170281.com-上海体彩11选五| www.241382.com-彩库宝典官方下载| www.662803.com-信誉时时彩平台排行| www.781214.com-微彩站中奖了怎么办| www.871463.com-体彩排列三图| www.14qv.com-彩票停售时间几点| www.2063.me-福利双色球彩票下载| www.8957.xyz-福彩3d易彩网| www.526931.com-福彩五星通选| www.596009.com-甘肃福彩陇彩宝下载| www.593579.com-福利彩票最高奖金| www.951112.com-天天体彩app| www.yy9.cc-快三助手软件下载| www.wu34.com-注册送钱的彩票网站| www.29tr.com-采摘牛彩-| www.60051.cc-微彩社交app| www.026319.com-广西体彩中心程汉荣| www.668221.com-丅丅彩票-| www.773580.com-谁有全民彩票群| www.845126.com-点石成金彩票| www.913057.com-好彩客坑人-| www.967424.com-吉林快三遗漏表| 新盈彩www.xinyc5.com| www.iv72.com-大红鹰彩票-| www.a40.bid-彩票九-| www.34uj.com-千禧彩神通关注码| www.339080.com-2018年开马彩| www.769672.com-七彩网络查询成绩| www.204108.com-内蒙古福彩下载安装| www.325732.com-排列3彩宝贝走势图| www.456380.com-名彩堂app下载| www.575996.com-福彩3d图迷双彩图| www.637308.com-彩虹像-| www.739339.com-多盈彩票网址| www.811329.com-福利快三有什么规律| www.880160.com-五分快三预测器| www.953263.com-体育彩票百科| 环球彩票www.hqcp6.com| www.250384.com-中彩啦彩票-| www.576832.com-网上网友让注册彩票| www.50977.com-360彩票遗漏数据| www.443088.com-网易彩票认账吗| www.798829.com-体彩泳坛夺金开奖| www.308962.com-福彩3d绝对布衣1| www.428016.com-华人彩官方登陆| www.859801.com-中博彩票app| www.948985.com-国彩网址-| 天天彩票www.190883.com| www.xi07.com-七彩集团连锁企业| www.38gg.com-彩礼风俗的真相| www.7080.win-大福彩票投注站地址| www.753196.com-跑马彩票是正规的吗| 财神网www.29277hh.com| www.vx70.com-贵州省福彩中地址| www.51le.cc-最近的福彩销售点| www.060351.com-威胁黑彩平台报警| www.283358.com-七乐彩怎么玩| www.400645.com-南国七星彩图纸| www.557366.com-唯美水彩花卉图片| www.698937.com-彩铅画的教程| www.876555.com-体彩是不是骗局| www.cai5255.com河南快三开奖查询| www.853328.com-168彩票怎么样| www.576450.com-59590吉利彩| www.33932.com-快三怎么样才能回血| www.g73.biz-七星彩十专家预测| www.36zq.com-七星彩145-| www.4568.top-中彩网播放频道| www.8765.net-临沂彩票分析大师| www.45047.com-盛大彩票555| www.90599.com-彩票还是自选的好| www.587111.com-微彩吧ios-| www.60yf.com-网上彩票还能恢复吗| www.561107.com-开奖彩坛网站| www.631098.com-双色球中彩票秘籍| www.697923.com-所有的彩票网址| www.760339.com-时时彩分析软件排名| www.821216.com-武汉福彩领奖流程| www.388080.com-华彩益彰是什么意思| www.487746.com-彩托是怎么回事| www.9991.com-体彩宝典-| www.819248.com-北京彩票论坛高手| www.931209.com-800彩票官网| www.986756.com-竞彩篮球比分推荐| www.gu7.cc-百盈快三计划软件| www.s40.org-福彩3d冷温热表| www.58hr.cc-彩票界牛人-| www.206463.com-福彩十二选伍快乐彩| www.121367.com-呼市福彩中心| www.386789.com-福彩凤彩网三d胆码| www.550866.com-彩票中奖是什么意思| www.691368.com-足球购彩平台| www.770632.com-举报万豪福彩| www.858515.com-福彩双色球37期| www.925009.com-福彩彩票软件| www.pn05.com-新彩福彩3d-| www.3da.com-仲博是黑彩吗可靠吗| www.171.biz-大地彩票软件| www.4181.vip-北京七彩汇国际会所| www.9642.loan-俄罗斯快三开奖| www.286485.com-中国体彩报下载| www.56me.com-七星彩出什么奖| www.94423.com-体彩竞彩篮球开奖|