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.22835.com-王者彩票违法吗| www.6855.me-体彩飞鱼复式投注| www.8db.cc-152彩票软件| www.815172.com-打彩票好学吗| www.968740.com-代玩彩票人的微信号| www.js94.cc-网上买彩票靠谱吗| www.35gw.com-南国七星彩开奖| www.63262.com-中国足彩网亚洲杯| www.7774.in-八年购彩心得| www.151248.com-港彩三中三技巧| www.280244.com-彩票幸运农场技巧| www.368488.com-七彩星txt-| www.074659.com-环彩网又活了| www.066556.com-亚洲慱彩app| www.1236.top-皇家世彩世界app| www.053443.com-有卖快三挣到钱的没| www.bn1.cc-手机福彩双色球投注| www.280400.com-重庆时时彩计划网站| www.206692.com-彩票996-| www.333463.com-体彩怎么买法| www.507484.com-cpcp彩票官网| www.579781.com-七星彩2282-| www.661214.com-计划彩票正规平台| www.860083.com-澳客彩票网手机版| www.954629.com-国外彩票的真实性| 大赢家彩票平台www.178352.com| www.397643.com-福彩刮刮奖破解| www.532220.com-体育彩排三开奖号码| www.01997.com-网彩危害-| www.71733.com-福彩综合版-| www.037029.com-成化珐琅彩-| www.984335.com-山西福彩公众号| www.id00.com-彩票新政策-| www.1bg.com-彩票冷热什么意思| www.76wi.com-体彩取消竞彩| www.2518.biz-饰彩饰的意思| www.223233.com-足彩500比分| www.j77.xyz-深圳福彩中心地址| www.89sq.com-重庆时时彩会下架吗| www.5095.cn-天津体育彩票大乐透| www.16751.cc-沈阳体彩在那| www.65129.com-河南永城彩色沥青| www.786293.com-大赢家彩票主页| www.739098.com-五福彩票软件| www.858023.com-中国彩票中心app| www.948901.com-福彩内部人员| www.301087.com-彩鸿彩票网址| www.739842.com-彩友吧预测专区总汇| www.982621.com-福彩3d兑奖有效期| www.z07.org-山东省体彩大乐透| www.8965.xyz-彩票开奖信息推送| www.064014.com-卖私彩会被判刑吗| www.118196.com-555彩票网注册| www.338941.com-118彩票安装苹果| www.559897.com-彩票收藏-| www.293.net-领彩票-| www.395133.com-彩虹搭建主站官网| www.106256.com-下载体彩大乐透| www.395.mobi-旺彩3d走势图| www.89199.cc-印象彩票网官方| www.538912.com-竞彩足球怎么打票| www.657013.com-怎么投诉黑彩网站| www.66yj.com-浙江快乐彩助手| www.856124.com-幸运快三代玩微信| www.928309.com-趣彩彩票官网| www.xm7.com-彩吧图库ii-| www.186534.com-浙江能买到七星彩吗| www.298608.com-山东体彩领奖| www.65739.com-福彩三d论坛讨论区| www.835253.com-500电脑版彩票网| www.635432.com-江苏快三怎样买大小| www.lf5.cc-大发快三走势图分析| www.ct36.com-私彩老平台| www.45641.cc-福彩三d图-| www.30419.com-浙江体彩排五走势图| www.os23.com-双彩镇有多少人口| www.521122.com-第一的彩票投注网站| www.791743.com-博京娱乐时时彩| www.4558.vip-彩票19035期| www.2144.vip-彩票36选5是哪个| www.7316.cc-彩虹娱乐官网| www.sr56.com-大乐透新浪彩票预测| www.08kl.com-快三追号是什么意思| www.597468.com-什么面相的人中彩票| www.3jx.com-彩素女装官方旗舰店| www.71ql.com-恒彩网页-| www.2254.xyz-腐女彩图百度云| www.8395.cm-七乐彩中奖彩票| www.36292.cc-中国福彩双包球| www.81558.com-褔彩双色球开奖号码| www.031875.com-几个靠谱的彩票网站| www.22389.cc-结婚彩礼和嫁妆| www.025091.com-彩票5app-| www.73mk.com-彩宝贝定胆之王| www.2067.me-旺彩3d胆码-| www.8359.wang-体彩进球-| www.36997.cc-730彩票网站| www.1447.net-彩铅图画大全图片| www.254212.com-手机时时彩网投平台| www.1vd.com-彩色饺子-| www.82td.com-新浪竞彩北单| www.2459.top-福彩3d试机号体彩| www.7749.biz-35彩票网开奖导航| www.22503.com-玩彩靠谱平台| www.63144.com-2019年彩礼法律| www.180082.com-易彩快3合法吗| www.864008.com-123彩票提不了款| www.961269.com-带人玩彩票-| www.cp6659.com-福彩河南快三| www.sh29.com-时时彩论坛-| www.8158.xyz-乐讯吹吹七星彩| www.76781.cc-万优彩票平台| www.190330.com-宁夏快三昨天走势图| www.718785.com-中国彩虹旗事件| www.835268.com-免税红好彩-| www.800511.com-卓易彩票倒闭| www.865136.com-分分彩稳定计划| www.923123.cc-108官网彩票平台| www.985149.com-福利彩吧8-| www.cp7726.com-杏彩168彩票网| www.jn24.com-彩票平台凤凰| www.ze43.com-快频彩票是什么| www.31583.cc-篮球外围竞彩网站| www.78997.cc-中彩票了怎么去兑奖| www.750027.com-快三私彩-| www.878299.com-北控国彩即开彩票| www.vw.cc-皇都彩票网址人口| www.8yf.com-中国体育彩票输赢| www.479.cm-时时彩任二技巧| www.902328.com-经营黑彩多少判刑| www.889558.com-248凤凰彩票| www.60645.com-七乐彩走持图| www.109858.com-快三龙最长的几个| www.966613.com-吉林快三全天计划表| www.126534.com-湖北体彩网下载| www.888966.com-中国体彩自动售票机| www.999896.com-福彩类似排列五| www.mg54.com-爱乐彩票登录| www.65qk.com-山东福彩电话| www.0094.net-霸气竞彩名字| www.176169.com-一分快三计划网| www.665640.com-红字体彩店app| www.859889.com-瑞彩祥下载链接| www.935892.com-求助基诺型彩票| www.443660.com-福彩大盘娱乐平台| www.554257.com-彩票语录图-| www.669616.com-彩钢夹芯板生产厂家| www.766056.com-重庆时时彩乐彩平台| www.848831.com-足球直播唯彩| www.941991.com-5258彩票-| www.nt4.com-3d彩票走势图| www.td11.cc-快三时时彩计划软件| www.755161.com-福彩个位跨度怎么算| www.870815.com-彩票投注翻倍计算器| www.40kz.com-金碧慧彩-| www.1114.cc-体彩模拟投注| www.084537.com-彩22平台-| www.156164.com-彩票号码推荐| www.19gy.com-做时时彩挂机软件| www.3366.vip-中彩网喜点-| www.tk3.com-江西快三推荐号| www.778433.com-彩乐园ll下载| www.885061.com-51彩票苹果版| www.975764.com-河南太康彩礼价目表|