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.002417.com-彩易网手机版藏机图| www.070.gg-虚拟彩票软件| www.8343.biz-辣椒型的七星彩软件| www.77454.com-南国彩票论坛南海网| www.057526.com-彩吧三d图谜| www.180070.com-街机新快三叫啥| www.273231.com-体彩中心工资高吗| www.367306.com-中国彩票返奖率太低| www.847856.com-古建筑彩绘标准| www.939654.com-云南时时彩开奖号码| 火星彩票www.hx6626.com| www.25011.com-彩铅叠色顺序| www.004187.com-彩票大赢家百度云| www.119645.com-彩票咋看-| www.218136.com-共赢彩票-| www.58983.cc-下载福彩藏机和直迷| www.924.in-3d福利彩吧-| www.533576.com-关于彩票中奖的电影| www.073533.com-彩6下载手机版| www.67213.com-安阳体彩中心电话| www.076967.com-中国彩票360| www.152727.com-cc彩票网-| www.287826.com-彩票合买永远都是亏| www.403448.com-海南七星彩投注网站| www.529515.com-香港特区彩票论坛| www.613688.com-网恋时时彩骗局| www.876619.cc-幸运彩票真假| www.bb.com-福利彩票河北快三| www.vu06.com-福彩快乐10分任6| www.73kj.cc-巨弘国际时时彩平台| www.2524.top-安徽彩票大奖去哪领| www.36718.cc-澳门高频彩票| www.88323.com-永丰彩票-| www.089188.com-七星彩开奖第48期| www.193139.com-福彩快三组合图表| www.316533.com-体彩大乐透兑奖地点| www.397436.com-七星彩中奖的人多吗| www.525221.com-福建体彩音聊天室| www.605732.com-吉祥彩05005| www.683673.com-彩61-| www.767331.com-福彩快三开奖系统| www.857459.com-竞球彩票-| www.970174.com-运彩网-| www.23oi.com-买足彩进球数的技巧| www.4934.cm-高频彩票打码量| www.22933.cc-福利彩票中两个数字| www.75456.com-彩妹双色球预测专栏| www.056253.com-吉林快三和值攻略| www.165365.cc-福彩3d破解高手| www.273450.com-海南竞猜型彩票玩法| www.372951.com-竞猜快三与快三区别| www.483153.com-彩富与你同行天下| www.571878.com-极速时时采彩app| www.654414.com-福彩今天出奖号| www.720260.com-七星彩经常开的规律| www.810068.com-黑龙江福彩发行中心| www.903363.com-内蒙古福彩地址| www.092015.com-江苏体彩手游彩下载| www.395322.com-快彩20分钟一期了| www.613516.com-三宝乐购彩票网| www.cp3653.com-河南福彩快三秘诀| www.678678.com-博大娱乐注册彩金| www.806014.com-申航彩票钱怎么出来| www.37674.com-体育彩票管理条例| www.0509.net-公益彩软件-| www.255269.com-中国彩票送彩金| www.88mr.com-江苏快三一定牛彩票| www.015790.com-七星彩在线购买| www.180700.com-兼职代玩彩票靠谱吗| www.567296.com-江苏福彩六加一开奖| www.675108.com-万通五分彩平台下载| www.776455.com-购彩汪官方大乐透| www.867960.com-开心七星彩网论坛| www.48404.com-3d福彩试机号分胆| www.qx34.com-分分快三如何破解| www.14591.com-今日彩报-| www.299672.com-彩中彩网址-| www.1440.vip-8888彩票-| www.075342.com-成功彩票注册| www.543562.com-中国体彩报发行| www.78341.com-聚丰彩票50707| www.453432.com-熊猫彩滨-| www.wt46.com-今晚南洋彩开奖结果| www.150478.com-2628彩票下载| www.500351.com-好好彩票-| www.751875.com-澳门快5彩骗局| www.645881.com-足彩高手经验谈| www.176152.com-快三定胆口诀逢3| www.642302.com-福彩头像-| www.786137.com-信游娱乐购彩平台| www.913901.com-中国福利彩票开兑奖| 彩天下www.c1393.com| www.nc06.com-彩83-| www.525267.com-福彩北斗-| www.111482.com-彩票一期一计划团队| www.885381.com-名为彩宝的app| www.230388.com-彩民彩票app下载| www.578997.com-360彩票全国开| www.161609.com-彩票部电话-| www.9764.in-七星彩晴予预测号码| www.891987.com-福福利彩票快3| www.ga30.com-迷彩兔官网-| www.uc04.cc-时时彩计划app| www.2708.top-牛蛙彩票资料跑狗版| www.96571.cc-怎样看彩票的奖组| www.39725.cc-彩票20万缴多少税| www.172559.com-河北新快三开奖结果| www.29kh.com-单张彩票中奖最多| www.qz60.com-五分快三的玩法| www.82cv.com-体育彩票大乐斗机选| www.637025.com-大星彩双色球走势图| www.46au.com-懂球帝足彩能提现吗| www.el05.com-广西快三赔率表| www.574979.com-老时时彩彩准确杀号| www.822025.com-中文3d彩漫-| www.05fl.com-吉林快三遗-| www.0946.vip-求一个合买彩票网站| www.wh16.com-腾讯彩票投诉电话| www.205303.com-内蒙古福彩管理中心| www.24476.com-彩票摇奖机-| www.198814.com-怎样购买体育彩票| www.731.com-时彩平台下载| www.464520.com-彩票投注网站好吗| www.78381.com-福彩3d万能四码表| www.365581.com-彩天地是什么东西| www.616958.com-买彩票中奖概率最高| www.365409.cc-安徽省彩票中心位置| 天天彩票www.160882.com| www.37379.cc-彩宝app官网下载| www.538262.com-竞彩混合计算器| www.319715.com-彩民福地客服| www.49394.com-广西淘宝快三彩票| www.974159.com-福运彩为什么要账号| www.55tf.com-成为一名彩票迷| 500万彩票www.96386j.com| www.132612.com-彩票截止时间| www.5065.vip-博盈彩票平台地址| www.6150.com-彩钢板屋顶-| www.127542.com-彩虹六号新手教学| www.224033.com-百盈快三合法吗| www.57292.com-锋彩-| www.664796.com-福彩在线开奖视频| www.6hx.cc-数学猜想彩票| www.19551.cc-聚星彩票靠不靠谱| www.897995.com-如何购买足彩| www.657921.com-利博彩票网址是什么| www.620011.com-嬴彩彩票与你同行| www.02450.com-彩神vi注册-| www.61ow.com-够力七星彩票奖辣椒| 网易彩票www.087wy.com| www.ex65.com-什么彩票软件靠谱| www.11wa.cc-彩票讯息时时彩计划| www.95751.com-福利彩票站牌匾| www.147888.com-彩票163开奖| www.838057.com-手机福彩3d购买| www.739534.com-头条号官网彩票| www.530987.com-福彩最大值振幅走势| www.72038.com-百胜快3彩票| www.957925.com-原福彩中心主任| www.96961.com-亚博体育假彩票系列| www.966199.com-发彩网是什么| www.55176.cc-微彩网址-| www.340500.com-买竞彩中大奖新闻| www.di77.com-青海快三投注平台|