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.018471.com-最高倍率彩票网| www.677154.com-福彩3d爆点图| www.807025.com-足彩如何稳定盈利| www.920156.com-彩票开奖源定制| www.988155.com-百万彩票官网| www.34qg.com-福彩3d彩库图吧| www.2510.xyz-饰彩-| www.dd98.cc-旭彩网-| www.483600.com-黑彩刘雪龙完整视频| www.454796.com-乐彩1充值-| www.262075.com-湖北快三未出统计号| www.383874.com-时时彩代码接口调用| www.653637.com-c1818cc乐彩| www.590065.com-福彩快3时间| www.762689.com-福利彩票免费领彩金| www.867555.com-算局七星彩排列五| www.963693.com-乐彩三d论坛静态版| www.cp6826.com-发彩网app下载| www.010575.com-熊猫彩票信息| www.34uq.com-中国七星彩内部号| www.688576.com-广东福彩助手| www.207709.com-11选5手机购彩| www.gr12.com-好彩1开奖结果| www.818948.com-绵阳市福彩中心地址| www.947185.com-体彩排列五的走势| www.20og.com-网易彩票机选双色球| www.785.cm-浙江体彩31选7| www.6572.cm-福彩彩票图片大全| www.38155.cc-湖北福彩app官方| www.227091.com-c168彩票信誉好| www.5297.cn-时时彩地方彩种| www.371655.com-5分钟时时彩| www.080078.com-彩票3d规律学研究| www.172197.com-江西快三彩票网页| www.83838.com-彩票哪里买哪里兑奖| www.872985.com-下载8彩之星| www.991437.com-七星彩在哪里买| www.ke54.com-福利彩票开奖记录| www.261535.com-彩票互动大厅| www.491611.com-微信快频彩票| www.193.la-万紫彩票-| www.86413.com-江苏体彩助手| www.108844.com-新未来彩票平台| www.987553.com-皇都彩票怎么玩法| www.459548.com-彩票1516-| www.678393.com-福彩3d大眼睛预测| www.er72.com-大快三破解版手机版| www.00247.com-58彩票手机客户端| www.137270.com-彩虹冰淇淋-| www.31fd.com-南京市体彩申请| www.2299.hk-福彩快3改革| www.397277.com-竞彩计算让球胜平负| www.558981.com-彩虹儿童歌曲| www.638566.com-南通竞彩店地址| www.237342.com-6+1走势体彩| www.397582.com-彩票打票几点停| www.562697.com-私彩高频彩输| www.731529.com-福彩图迷汇总六| www.834247.com-好彩爆珠哪里有卖| www.952548.com-188彩票手机版| www.px80.com-彩票大白菜分享网站| www.9577.win-中国合法网络彩票| www.883271.com-鸿彩直播平台下载| www.973761.com-一分快三ios下载| www.cp9679.com-彩票1分快3怎么玩| www.mq40.com-中彩彩票可信吗| www.x33.cc-极速彩票app下载| www.79qa.com-惠州彩票中奖| www.1664.org-彩票行业五行属于| www.6665.date-桂剧彩调-| www.17832.cc-竞彩错一场圈套| www.012263.com-481彩票选号技巧| www.637776.com-懂球帝彩票推荐| www.977909.com-福利彩票3d写迷| www.675226.com-财政部调整竞彩| www.770290.com-快乐彩票注册| www.843222.com-体彩什么时候发行的| www.921559.com-彩神开奖规律预测| www.995255.com-北京福彩论坛3d| www.bz34.com-乐彩官网app下载| www.539665.com-彩虹的约定钢琴简谱| www.88392.cc-世界彩票记录| www.537179.com-55彩票官方安卓版| www.3qv.cc-京彩集团是做什么的| www.76nr.com-七乐彩销售到几点| www.140038.com-易彩快三技巧| www.34932.com-时时彩后三组六计划| www.292729.com-人人中彩票官网77| www.015230.com-七星彩经-| www.091597.cc-春秋彩票登录网页| www.191596.com-彩经网-| www.269623.com-彩票99安卓下载| www.92rw.com-韩国彩票3d-| www.89544.com-2019年四月足彩| www.070378.com-91彩神怎么下载| www.294004.com-驿站彩票首页| www.371915.com-七乐彩五分区走势图| www.072711.com-哪些彩票注册送彩| www.36aa.com-开心彩票正规| www.cp7221.com-快三群-| www.144819.com-168彩票软件下载| www.cp9355.com-中彩啦软件-| www.608335.com-中彩3d开机号今天| www.680183.com-福彩可以网络投注吗| www.fq31.com-胜利彩票app| www.9513.org-彩票运势-| www.513234.com-爱购彩进不去| www.573824.com-彩票数字拾取算法| www.631019.com-彩票平台彩票| www.685501.com-非凡彩票主页| www.54833.com-彩票代购网站的图片| www.017830.com-四亿彩票官网| www.130001.com-体彩网11-| www.236262.com-福利彩票手机投注站| www.350122.com-乐彩网排三首页| www.780277.com-快开彩票下载安装| www.855684.com-海南七星彩四码定位| www.922785.com-彩票的前景如何| www.972497.com-查体彩开奖号码| 瑞彩网www.809215.com| www.gk60.com-众彩平台网址| www.927397.com-福建体彩直播| www.688968.com-3d山东福彩沙龙| www.kr50.com-新浪足球彩票胜负彩| www.2yz.cc-彩票一等奖多久到账| www.83bk.com-手机动漫彩印包月| www.973634.com-福建体彩彩票| www.cai6033.com吉林省体彩兑奖流程| www.009188.com-159发发发彩票| www.95703.com-竞彩8串1返还率| www.27929.com-中彩双色球开机号| www.904024.com-彩神v10下载| www.969763.com-全民中彩票官网| www.131212.com-安阳市区彩礼怎么要| www.834452.com-欧盟好彩蓝莓单爆| www.679118.com-人人竞彩官网| www.949951.com-星炫彩票-| www.652368.com-福彩最新两元刮刮乐| www.117660.com-8福彩票-| www.570361.com-七彩祥云是真的假的| www.668716.com-华人官彩-| www.758827.com-买彩票中奖事件| www.7074.cn-银川七彩艺校| www.982219.com-中华彩票平台安全吗| www.ed58.com-乐八彩票平台| www.0571.date-播彩老头-| www.782115.com-数字彩大数据统计| www.462008.com-私彩受害人怎么办| www.159147.com-下载福彩走势图| www.424889.cc-装饰七彩甜甜圈| www.679565.com-老公买彩票欠下债务| 博乐彩票www.188737.com| www.8161.vip-精彩大乐透频直播视| www.4243.net-福利彩票乐彩| www.07077.com-福利彩票什么软件买| www.86395.cc-如何画新彩线条| www.030556.com-彩网cai5-| www.101917.com-红彩会正规吗| www.162286.com-信誉彩平台-| www.218720.com-福彩刷流水-| www.282021.com-六壬预测福彩3d| www.87ir.com-彩一票开奖查询结果| www.954256.com-七星彩三等奖多少钱| www.ft43.com-福彩快三投注|