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.961832.com-成都快三开奖结果| www.420420.com-中博国际彩票| www.16235.cc-微信快三托-| www.79228.cc-银河彩票手机网投| www.lp08.com-全民彩安装-| www.220341.com-乐彩网手机客户端| www.61il.com-好乐多彩票网| www.79bc.com-主角彩票中奖的小说| www.636921.com-emoji彩虹-| www.37244.com-头奖彩票下载并安装| www.128492.com-熊猫在线彩票| www.674540.com-财政部和彩票| www.400599.com-彩绘网-| www.598987.com-七星彩35期推荐号| www.30po.com-足彩复式经济投注| www.26677.cc-复式七星彩中奖查询| www.133483.com-御都彩票安卓aoo| www.674365.com-全国体育彩票试机号| www.944568.com-上海彩票店利润| www.pc53.com-一分快三全天计划网| www.676961.com-彩色彩办公-| www.516288.com-乐彩赢官网0014| www.88392.com-欧美彩票大奖排行榜| www.016975.com-彩票店的前景如何| www.388690.com-贵州竞彩快三查询| www.722892.com-万森彩票平台手机版| www.891456.com-有完没完没看懂彩票| www.052926.com-彩票揭秘技术书籍| www.311599.com-彩之家3d走势图| www.201426.com-彩票投注平台| www.651854.com-福彩大乐透双色球| www.713679.com-红坛博彩500| www.944711.com-乐发彩票是真的吗| www.pe54.com-282cc天下彩| www.623493.com-快三传统玩法平台| www.737574.com-吉林快三遗漏三同号| www.93cb.com-好好彩票-| www.sq09.com-2019快三微信群| www.123390.com-乐彩论谈-| www.836488.com-快开彩拉人-| www.332090.com-福彩十选五真的假的| www.613637.com-代买彩票骗局| www.171843.com-贵州福彩开奖结果| www.853754.com-专业玩彩个网页| www.w78.club-天地彩-| www.657884.com-腾讯福彩-| www.513177.com-口袋彩店关闭| www.268960.com-长城福彩-| www.yg63.com-彩38彩票-| www.691565.com-xmmmb彩票-| www.036170.com-分分中彩票2018| www.263643.com-中彩网走势图大乐透| www.447354.com-众彩网怎么赚钱| www.601159.com-彩票能提前买几期| www.769644.com-如何判断好彩真假| www.447134.com-家有惊喜福彩三d| www.705001.com-众乐彩票提现| www.912873.com-体彩三d试机号| www.65wp.com-期期中彩票软件下载| www.6587.top-数字彩票新浪| www.712885.com-流行彩铃-| www.414933.com-三分钟跑马彩票平台| www.762901.com-江苏十一选五爱乐彩| 爱彩乐www.www.ac9911.com| www.69ry.com-关于买彩票的故事| www.32465.com-88彩票网手机版| www.167908.com-彩票快3怎么玩的| www.491607.com-快频彩票赌一下个号| www.734757.com-福利彩票和值技巧| www.953513.com-泰国彩票开奖网址| 99福彩www.369965.com| www.130238.com-中国体彩中奖号码| www.613613.cc-网恋香港人买彩票| www.734598.com-福气彩票查询快3| www.853107.com-福彩三b爱玩彩| 大赢家彩票www.5086n.com| www.007249.com-qq彩票软件-| www.194122.com-云南快三开奖号码| www.389787.com-东莞大朗彩票站转让| www.730457.com-快三私庄-| www.73811.cc-体育彩票如何购买| www.253191.com-好彩自然来-| www.495567.com-南国彩七星彩论坛| www.8842.in-二分彩计划-| www.106.tv-兴安盟体彩中心| www.6655.loan-上海快三跨度怎么看| www.669013.com-海南私彩4位热码| www.80gz.com-七星彩开奖号码最新| www.fy01.com-刷彩票流水-| www.466528.com-平台自带秒秒彩| www.127618.com-枯萎的彩虹玫瑰| www.5113.cn-江西彩民中奖| www.119070.com-可以买体彩的app| www.115150.com-超级彩票助手软件| www.509955.cc-3d彩报图库手机| www.852359.com-河内时时彩吧| www.534590.com-福彩开奖频道| www.36477.com-澳彩初盘特点| www.9137.biz-彩虹宝宝玩具推荐| www.mm00.cc-秒速时时彩官网平台| www.08592.cc-鸿彩灯光官网| www.790700.com-武汉福利彩票走势图| www.4iy.com-19500彩票网| www.232707.com-快三中奖查询| www.973309.com-17500彩吧-| 68彩票www.68689l.com| www.259849.com-河南福彩自助机| www.629663.com-周六是体彩还是福彩| www.589967.com-七星彩本期局王| www.510436.com-彩虹的约定儿歌简谱| www.yx1.cc-彩票技巧顺口溜| www.8276.cn-珀彩国际是传销吗| www.095186.com-老梁谈福利彩票| www.237740.com-竞彩足球比分彩客网| www.484185.com-福州体育彩票店| www.622605.com-福福彩彩票站多少钱| www.720047.com-足彩那个网可以买吗| www.951415.com-彩票信誉平台推荐| www.iy35.com-浙江省体彩兑奖中心| www.2562.cc-时时彩后三计划技巧| www.57969.com-江苏体彩七位数奖金| www.059141.com-广西快三计划公式| www.337187.com-那种彩票可以玩单双| www.475062.com-免费抢红包彩票| www.625919.com-什么叫单关彩票| www.727656.com-乐彩17500cn| www.874228.com-今晚彩票开机号| 中国福利彩票www.08588s.com| www.xg70.com-七星彩2242-| www.53ak.com-遵义彩票销售员招聘| www.09515.com-中大奖彩票下载| www.791940.com-今天双色球彩票指南| 凤凰彩票www.77801h.com| www.811501.com-彩享开奖结果查询| www.907993.com-彩票预测网站源码| www.8133.cn-各种彩票开奖日| www.40029.com-彩票聋哑学校| www.992046.com-福利彩复式怎样玩法| www.19204.com-福彩可以异地兑奖吗| www.339076.com-21个号彩票-| www.697992.com-浙江体彩网下载软件| www.520597.com-航天彩虹镇房价| www.676053.com-明天开奖彩票| www.870822.com-彩81彩票骗局| www.kh03.com-山东福彩app| www.iw7.com-体彩走势图乐彩网| www.39.vip-广西快乐双彩官网| www.82yn.com-百度福利彩票| www.3883.vip-竞彩分析app| www.700714.com-可变条码彩票厂家| www.cai53.cc-吉林省快三走势图| www.949657.com-陕西福彩下载安装| www.rp78.com-5分钟开彩票合法吗| www.79xd.com-南方双彩排三走势图| www.09978.cc-51彩票网-| www.79612.cc-福利彩票3d新彩吧| www.ul02.com-内蒙体彩-| www.fv83.com-综艺股份彩票| 鸿运彩票www.hy5507.com| www.757337.com-体彩店刷佣金违规吗| www.899922.com-体彩简单申请书| www.2611.in-大发快三有没有破解| www.9209.in-彩虹精化股票分析| www.oh65.com-c9..com彩九|