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.ju00.com-贵州快三奖金规则| www.82613.cc-奥博集团彩票| www.079593.com-佛山快三-| www.799090.com-奔驰彩票网站| www.906235.com-彩色圆柱体红色教案| www.987397.com-234彩票打不开| www.rl4.com-快三三不同号多少钱| www.qp62.com-福彩文化的理念| www.4px.cc-体彩开奖现场地址| www.812627.com-手机贴彩膜好不好| www.mk25.com-体彩扑克牌开奖| www.95tf.com-自贡市中国福利彩票| www.9317.xyz-香港球彩台大头| www.066008.com-彩虹代刷网装修代码| www.208666.com-吉林快三豹子规律| www.330007.com-山西体彩网首页| www.386356.com-玩运彩即时比分直播| www.518513.com-乐仑彩票官网是多少| www.612771.com-uc彩票网址-| www.683192.com-体彩彩票缩水软件| www.761927.com-庄家克星时时彩| www.831221.com-足彩4月份安排| www.906113.com-狗万比国彩好多了| www.984310.com-福建快三号码统计表| www.al26.com-七星彩前四位| www.112161.com-泰安三亿彩票| www.069032.com-苏州福彩快3推荐| www.015430.com-七星彩500走势图| www.09an.com-体彩中心网站| www.9060.net-大庄家彩票网址多少| www.378812.com-周一福彩开奖| www.558957.com-高大上彩虹屁| www.688514.com-彩票站卖黑彩判刑吗| www.843181.com-好l23彩票-| www.ih61.com-体育彩app-| www.916.com-七星彩连中4个号码| www.17475.com-下载彩59彩票| www.65514.com-快三最高连开多少期| www.085168.com-苹果彩票网~手机版| www.241338.com-老版彩库-| www.384639.com-竞彩预测分析推荐| www.5968.me-彩票打彩票的法律| www.356503.com-赠送彩票营销| 好彩www.60123y.com| www.560006.com-腾讯分分彩过号器| www.0208.pw-网易彩票怎么停了| www.55301.com-网络博彩-| www.019785.com-桐梓彩票店转让| www.036047.com-彩计划下载福彩3| www.9805.net-足彩最新缩水软件| www.85790.com-授渔看彩最新| www.924943.com-傲赢彩票官网| www.990314.com-福彩字谜牛材网| www.fw66.cc-陌陌彩票托-| www.892748.com-成化珐琅彩-| www.981805.com-手机qq彩票怎么买| www.og6.com-鑫彩网是真的假的| www.rq22.com-重庆时时彩2星技巧| www.op71.com-手机版甘肃福彩快三| www.5gw.com-福甘肃快三彩开奖| www.80gr.com-极速时时彩是骗局吗| www.0213.cc-彩吧彩报银海版| www.139789.cc-盈彩在线下载| www.496400.com-13彩最新消息| www.682905.com-彩票能用手机买吗| www.559072.com-k3福彩平台-| www.724843.com-买彩票就是赌博| www.940937.com-彩票培训课程| www.z08.cn-大猿口算数福彩| www.2141.cc-体彩开店利润怎么样| www.563334.com-cc彩8-| www.621982.com-福彩欢乐十选五| www.442468.com-福彩3d蓝精灵地图| www.988955.com-迅盈彩票官网下载| www.nt37.com-绵阳福彩中心| www.59dg.com-大发云彩神88| www.154829.com-足彩入门到精通| www.dx28.com-分分快三下载安装| www.ku93.com-上海福彩选4走势图| www.01eq.com-七色彩虹秒赞网| www.94df.com-易彩云福彩网| www.cai97.cc-吉林省快三走势图和| www.27cw.com-众购彩票多手机版| www.k31.cc-一分快三有什么规律| www.91bb.cc-家彩网试机号开机号| www.4649.club-买彩票靠的是运气吗| www.63284.com-足彩18088-| www.408248.com-重庆时时彩注册代理| www.hb70.com-彩运8鼎盛-| www.010918.com-七星彩计算公式教程| www.177113.com-我想买彩票-| www.386011.com-123彩票骗局| www.ja66.com-中国足彩网电脑版| www.05nh.com-七星彩走势图连线图| www.0052.cn-一组彩票多少数字| www.8666.biz-福彩d开奖结果今天| www.406868.com-福利宝彩票软件| www.718611.com-彩虹羽泉歌词意境| www.962558.com-彩友时时彩计划| www.zn15.com-足彩比分手机| www.30655.com-新浪爱彩彩票走势图| www.345007.com-9999彩票网-| www.02411.com-体彩天下安全吗| www.bx40.com-广西彩票客户端| www.77jm.com-如何用五行买彩票| www.892922.com-全民彩官网下载苹果| www.xv58.com-d9彩-| www.910275.com-新浪体育彩票网| www.468379.com-刮刮乐彩票中奖图片| 彩乐乐www.3005x.com| www.200687.com-7星彩专家预测号码| www.568931.com-今天福彩3d太湖| www.636000.com-山东7乐彩开奖结果| www.700387.com-福彩3d藏机字谜图| www.771781.com-时时彩官方开奖平台| www.837627.com-东莞体彩申请表| www.919693.com-时时彩制作网站价格| 500彩票www.330831.com| www.974645.com-众彩网客户端app| www.cp4190.com-黑马计划网页版快三| www.100.gg-彩票开奖是几点| www.793.win-请我易彩堂合法吗| www.508229.com-彩票哪个平台计划稳| www.512759.com-水彩画凤凰-| www.820663.com-七星彩开奖综合| www.4056.vip-青海体育彩票网管网| www.427087.com-旭彩首页-| www.888715.com-515彩票-| 金冠彩票www.49956g.com| www.0365.me-玩彩票官网下载| www.044177.com-福彩正版真精华布衣| 天天彩票www.2373w.com| www.238765.com-赢发彩票网站| www.3293.win-足彩网胜负彩解盘| www.333411.com-彩票分析予测| www.9119.bid-复试彩票多少钱一注| www.455989.com-手机彩票怎么兑奖| www.7766.vip-彩宝网开奖公告| www.26868.cc-刮刮乐福彩自助终端| www.764183.com-举报非法彩票电话| www.820094.com-彩富足球网-| www.875582.com-彩神3怎么样| www.r85.com-湖南福彩兑奖地点| www.0757.space-福彩三d试机号破解| www.26188.com-彩虹周杰伦歌曲| www.x51.me-双色球彩票交流群| www.04zn.com-7是彩开奖公告| www.73iq.com-天天免费好彩大料| www.697933.com-彩报3d图库三毛| www.291273.com-oo8彩票论坛| www.114268.com-陈华赌一胆福彩| www.174855.com-快三网上直营代理| www.020384.com-c38彩com-| www.9622.xyz-国彩官方网站app| www.932352.com-快三网投下载app| www.36112.cc-湖北福彩微信代运营| www.995885.com-竞猜足彩310| www.ec53.com-京彩彩票骗局| www.xh32.cc-够力七星彩下载安装| www.11gq.com-体育彩票真实吗| www.62sg.com-福彩3d精华精衣3| www.467.xyz-体彩随机中奖率高| www.9184.cn-七乐彩上期销量| www.59220.com-彩铅画人物教程|