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.555890.com-我要机选一注七乐彩| www.932600.com-沧州彩色纸箱包装厂| 凤凰Vwww.www.fh7557.com| www.sa47.com-大快发彩票官网| www.4758.vip-游戏厅刷彩票| www.105646.com-c59彩票四不像| www.319837.com-亿彩票合法吗| www.206094.com-福彩双色球预测分析| www.k40.com-好彩官方版版app| www.00078.cc-最新的彩票网站开发| www.3632.wang-鴻彩彩票-| www.95541.com-有没有彩票杀号软件| www.145523.com-彩票课堂-| www.301307.com-微彩排列-| www.25292.cc-彩色铅笔素描入门| www.044426.com-王牌彩票下载安装| www.770028.com-七彩山鸡蛋-| www.45yx.com-牛彩网11选五| www.01gh.com-中国彩民彩吧| www.939928.com-彩神大发快三邀请码| www.503888.cc-彩票平台首充福利| www.am62.cc-内蒙快三一百期| www.376218.com-彩立子-| www.984974.com-褔彩3d丹东全图| www.di05.com-网上快三网站| www.zc09.com-甘肃福利彩票陇彩宝| www.44eq.com-彩虹桥活动-| www.136202.com-苏州福利彩票店转让| www.4890.net-佬牛足彩专家预测| www.768681.com-福彩之家下载| www.879556.com-快三是福彩吗| www.996907.com-手机彩票趋势软件| www.ir09.com-下载360彩票| www.l64.cn-彩票走势图分析图解| www.lf28.com-彩23app-| www.36wp.com-彩703彩票-| 彩民网www.76520m.com| www.652316.com-9号彩票线路检测| www.737468.com-快三送彩金的| www.819411.com-彩票计划时时彩| www.u70.cc-澳门博彩财务| www.71mh.com-关于彩票的名言| www.880439.com-3号彩票平台| www.009908.com-优信彩票登录| www.77699.com-福利彩票藏机图今天| www.415099.com-七彩建盏是什么材质| www.527188.com-体彩电脑版-| www.592996.com-彩虹六号-暗影先锋| www.668916.cc-美国彩票最大| www.751661.com-可以提现的手机彩票| www.162386.com-跟买足彩-| www.123832.com-天天乐彩下载| www.802367.com-全能中彩票app| www.902795.com-彩票任务代打| www.991468.com-中彩啦能买彩票吗| www.yc0.com-卖体彩一-| www.xc32.com-7星彩走势图综合| www.15wh.com-体彩装修补贴标准| www.78uf.com-六台彩迷宫乐极生悲| www.1840.cc-天天彩报论坛| www.8888.gg-守信彩票下载| www.508835.com-爱玩彩应用-| www.j88.pw-彩巴图库55125| www.252111.com-吉林快三遗漏一定牛| www.408032.com-国家规定彩礼| www.596079.com-小熊猫福彩3d| www.772474.com-时时彩遗漏冷热统计| www.970168.com-台湾福彩开奖记录| www.wx82.com-七星彩现场直播频道| www.2344.com-愚人彩票头奖图片| www.xh34.com-双彩网真实吗| www.529887.com-东方彩软件-| www.666889.cc-乐彩怎么玩才能赢钱| www.822354.com-顶呱呱彩票-| www.896687.com-华夏彩票是真是假| www.977437.com-各地彩礼限高的规定| www.xl6.cc-分分快三规律破解| www.tv69.com-机选3d彩票一注| www.893090.com-休玉彩票-| www.984810.com-期期好彩下载| www.945218.com-买彩票几点截止| www.cp711.com-快三都哪个省份有| www.362135.com-描写彩虹好词佳句| www.9169.vip-网易时时彩开奖号码| www.021404.com-幸运分分彩开奖记录| www.110649.com-福彩20分钟开奖| www.580088.com-超级赛车彩票| www.311917.com-快彩网彩票平台| www.401660.com-财神彩库-| www.6696.live-快三复式表-| www.51571.com-福彩三d彩吧论谈| www.e05.pw-竞彩8串28-| www.93hu.com-体彩公司靠谱吗| www.392526.com-搜狐彩票电-| www.515853.com-彩票引发的官司| www.028614.com-3d彩报图库中心| www.526503.com-时时彩后二复式组选| www.11606.cc-高频彩套利是真的吗| www.980740.com-彩票资质-| www.u26.net-天天中彩票软件| www.0028.online九号彩票手机版下载| www.6032.cn-云南省她方彩票| www.076219.com-红旗彩票是真的吗| www.70390.cc-奔驰彩票qq客服| www.752718.com-彩牛网免费资料大全| www.99732.cc-香港体育彩票| www.984500.com-微信打彩票-| www.rx2.com-上海体彩新11选5| www.942878.com-南宁福彩大厦| www.999999.com-彩民村大乐透走势图| www.en16.com-互联网销售彩票公告| www.327811.com-体彩坑还是福彩坑| www.7nw.cc-拾到的彩票奖金归谁| www.186083.com-快三作弊-| www.360067.com-七星彩摇号器| www.671052.com-乐盈彩网-| www.86903.com-巴拿马快三查询| www.691333.com-胜负彩14场直播| www.168648.com-新快三开奖结果| www.0498.com-附近福利彩票网点| www.521680.com-新浪彩票全国开奖| www.11tk.com-体彩天下评论| www.581.cm-套彩对打-| www.1576.cn-彩宝网站有没有骗局| www.9016.vip-百度彩票app一元| www.616418.com-竞彩半全场全包盈利| www.760150.com-彩票四季发财怎么玩| www.213028.com-福彩3d试机和金码| www.1100.top-竞彩总进球全包打法| www.328662.com-福彩3d精选讨论| www.116031.com-买足球彩票规则| www.295123.com-下载贵州快三| www.4028.vip-sb博彩全称-| www.32ot.com-大连远洋竞彩14日| www.267255.com-高频彩票技巧| www.484661.com-青娃彩票现场直播| www.626951.com-仁和彩票-| www.820062.com-镇上可以开彩票站吗| www.vx53.com-要快三赢的多吗| www.21tk.com-彩票百富网-| www.571735.com-大发彩票是正规的吗| www.365019.com-彩虹伴奏周杰伦视频| www.586571.com-双色球下载彩票平台| www.577221.com-七星彩讲座视频直播| www.6126.vip-中国山东福彩网| www.pw79.com-怎么鉴别假彩票店| www.04cp.com-福彩3d彩诗迷| www.95px.com-多彩投类似的平台| www.2122.pw-津南区彩票中心| www.10xd.com-彩票代买兼职| www.5173.la-韩国彩票是真的吗| www.251720.com-怎样买彩票-| www.107187.com-黑彩票平台破解器| www.pj05.com-手机中国体彩网提示| www.7pl.com-体彩的门头要求| www.54ye.com-彩票兑换中心商品| www.756250.com-福彩快3几分钟开奖| www.645632.com-关于彩票感想| www.186467.com-3号彩票网站| www.656488.com-博彩王网站-| www.810385.com-悟空彩票是真是假| www.886451.com-双色球买彩大厅| www.974216.com-南京福彩开奖结果| www.cg3.com-好彩1-|