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天

知道了
彩票123现在叫什么名字 www.593374.com-七彩国际大酒店| www.729816.com-时时彩真的能赚钱吗| www.801154.com-彩71网站-| www.871956.com-牛彩票下载官网| www.939769.com-彩票导师带计划| www.988954.com-体彩选号缩水软件| www.jl94.com-陌陌彩票拖-| www.322589.com-开七星彩的直播现场| 彩天下www.196036.com| www.911679.com-天天彩4基本走势图| www.cai8258.com山东体彩十一选5| www.221260.com-彩票是否中奖查询表| www.344041.com-谁有彩民群-| www.442179.com-彩票中奖号排三| www.548347.com-28彩票网址-| www.914866.com-彩神不让提现| www.539938.com-出国买足彩-| www.894805.com-双色球彩票中奖情况| www.997807.com-乐彩3d和差-| www.hg78.com-快乐中彩票下载| www.8pi.com-南京市彩票店转让| www.tu67.com-福i彩开奖结果查询| www.69dv.com-4d马来西亚彩票| www.28968.com-亿佰彩票邀请码| www.82008.cc-开奖前多久能买彩票| www.060185.com-大发快三如何倍投| www.174068.com-新快三平台-| www.60hp.com-购彩帮肋中心| www.0976.bid-彩票长龙提示| www.6199.top-网上买彩票500万| www.10614.com-足彩欧赔口诀| 大玩家彩票www.9478j.com| 博友彩www.371e.cc| www.cc21.cc-快三爱彩乐湖北| www.158590.com-龙江体彩七星彩| www.254014.com-湖北省快三遗漏数据| www.332723.com-京彩8-| www.405634.com-山西临汾彩礼| www.507112.com-三彩彩票-| www.88fk.cc-新富贵彩票-| www.fm22.com-500彩票电脑版| www.015843.com-体彩扑克牌豹子多钱| www.587983.com-新浪竞彩电脑版| www.314075.com-浙江福彩快-| www.33938.cc-彩票分析师工作| www.816219.com-特区利民彩票论坛| www.1409.cc-福利双色球彩票开奖| www.21861.cc-集彩彩票-| www.070455.com-怎么成为足彩分析师| www.89fe.com-新浪足彩首页| www.713680.com-中超彩票app| www.843355.com-福彩网页面-| www.7999.cn-nba博彩哪里买| www.39579.cc-大乐透彩票解码器| www.617055.com-白山市体彩中心电话| www.713652.com-江苏快三计划网站| www.795869.com-福佳彩开奖官方网站| www.35646.com-大象彩票网-| www.720996.com-彩票2元走势图三d| www.1di.com-江苏e球彩视频直播| www.327503.com-彩票投资赚钱能信吗| www.722217.com-单个彩铅画图片大全| www.034906.com-彩票816下载| www.25599.cc-彩票断组什么意思| www.695983.com-胜负彩比赛-| www.759615.com-哪些网站可以赌彩票| www.883564.com-博瑞彩票app下载| 68彩票www.68689s.com| www.065920.com-私彩数据会上官方| www.3963.net-中堂彩xyxcc| www.39584.com-快乐彩票余额图片| www.608733.com-赛马派彩及结果s1| www.4073.biz-内蒙福彩8066期| www.282717.com-彩95-| www.383273.com-分分彩平台出租| www.569400.com-福彩中几亿-| www.654076.com-菲律宾网络彩票事件| www.817967.com-足球胜负彩直播| www.895527.com-有人网投彩票赚钱吗| www.965603.com-买彩票那个软件好用| www.lf5.com-中原彩票一分快三| www.vm74.com-旺彩开奖结果| www.336868.com-江苏快三走势定牛| www.004317.com-彩神幸运飞艇计划| www.122396.com-七星彩走势图星期天| www.203752.com-福彩3d高人-| www.980263.com-彩票cp12平台| www.21ec.com-足球竞彩预测分析| www.34401.com-大众彩票网审核| www.290140.com-彩票大赢家推广码| www.560278.com-雅玛吧彩票游戏| www.680430.cc-福利彩票快3银川| www.788512.com-今天多乐彩开奖结果| www.890983.com-8848魔方彩票| www.983064.com-体彩吧论坛-| www.iy39.com-中国福彩开奖号码| www.436608.com-彩票营收-| www.356907.com-过生日可以送彩票吗| www.485979.com-竞彩篮球胜分差教程| www.255354.com-彩票送金-| www.355984.com-彩哥腾讯分分彩| www.426405.com-足球彩经-| www.521735.com-来彩网云数智推| www.586085.com-时彩8610-| www.645270.com-彩霸王心论坛| www.701899.com-体彩福建-| www.772753.com-时时彩稳赢投法| www.830344.com-qq分分彩怎么玩| www.885084.com-3d今日云刚说彩| www.943774.com-惠民乐彩票真的吗| www.983275.com-盈彩是真的吗| www.cai9066.com查询彩票开奖| www.698521.com-各省快三开奖| 乐点彩票www.318187.com| www.8dw.cc-微群信指导彩票| www.68075.com-彩票赌博罪量刑标准| www.086049.com-足彩分析姜山冷门| www.ev30.com-快三看号技巧| www.818034.com-足彩十四比分直播| www.025749.com-开私彩-| www.554107.com-体彩店开业素材| www.632344.com-时时彩任选一技巧| www.33.vip-彩票大数据分析网站| www.61309.com-快三高手稳赚| www.649478.com-博彩业到底有多强大| www.791406.com-排列三走势坉彩经网| www.294813.com-体彩蓝琪儿断组| www.5522.top-河北省体彩中心举报| www.5126.cn-福利彩票史上最大奖| www.838092.com-竞彩倍投害死人| www.921105.com-彩票查询双色球预测| www.qs8.cc-吉体彩11选5| www.21dj.com-keystr彩票-| www.2601.vip-电信永久免费彩铃| www.018675.com-体彩e球开奖| www.4iu.com-我爱彩票开奖结果| www.501797.com-易彩乐被骗-| www.339365.cc-思乐福彩投注机| www.122191.com-福彩开奖l-| www.493400.com-守信彩票是真的吗| www.125888.com-多玩彩票下载| www.o11.net-竞彩扣税吗-| 58购彩网www.58gc8.com| www.41700.com-彩影安卓手机版下载| www.85389.cc-5oo彩票下载| www.96vq.com-体彩验票查询| www.432499.com-买彩票10年-| www.521936.com-亿彩网怎么下载安装| www.599877.com-体彩能打双色球吗| www.659017.com-福彩堂高手彩票| www.786523.com-360竟彩篮球| www.cai2323.com彩票快3技巧| www.601702.com-有钱人买彩票| www.627468.com-乐迷彩-| www.934666.com-最新彩票ios版| www.356.pw-怎么购买外国的彩票| www.036061.com-现在038彩票| www.004.date-五彩滩-| www.63oa.com-彩票免费大全| www.6516.com-怎么样开彩票店| www.72339.cc-规模最大的彩票软件| www.419619.com-六亿彩网-| www.506625.com-双色球诗迷彩宝贝| www.582201.com-看一看内蒙福彩快三|