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.44633.com-胆拖投注号百彩票| www.034811.com-正规彩票有几个网站| www.121298.com-彩票双色球开奖公告| www.201369.com-七星彩晴予-| www.272917.com-福彩刷流水是骗局吗| www.95354.com-中国福利彩票新彩网| www.081601.com-体彩门头-| www.893781.com-49官方网站彩票| www.tz40.com-彩票里的长龙怎么玩| www.57ki.com-广西彩票中心在哪| www.2471.pw-好彩网首页下载| www.121360.com-澳门彩票足球合法网| www.423910.com-金山彩票奖多多| www.556291.com-为什么买私彩总是输| www.628834.com-六福彩票是真的吗| www.48vv.com-三国梦想星彩惨无| www.07844.com-苏州快三开奖公告| www.788767.com-山西广灵彩礼| www.888442.com-互联网彩票何时恢复| www.488578.com-福彩自助终端下载| www.fy46.com-河北体彩网-| www.954211.com-正规彩票助赢下载| www.tb27.com-彩票都有哪些种类| www.984493.com-财神彩票怎么样| www.wg42.com-彩计划全能版| www.65fi.com-经典说彩双色球预测| www.15688.com-华夏彩票提现不了| www.155678.com-彩票投注网站排行榜| www.qn27.com-快三一天多少期| www.995719.com-足彩一直买平局| www.iu59.com-福建体彩11-| www.t15.website什么彩票平台最可靠| www.60re.com-大盘娱乐福彩预测| www.1098.biz-平台彩票官方网址| www.376078.com-体彩安徽11选5| www.75573.cc-成功彩票登录网址| www.397684.com-福彩3d谜语前期| www.558389.com-彩铅动物画图片手绘| www.654116.com-福彩双色球红球数字| www.846583.com-pc蛋蛋彩票网址| www.917138.com-彩虹代刷网授权| www.980094.com-cp12彩票官网| www.dh75.com-快三网上卖-| www.2hs.cc-体彩足球赛如何买| www.68kb.com-十大博彩公司的网址| www.573281.com-699彩票旧版首页| www.952297.com-马来分分彩开奖直播| 大赢家彩票网www.178673.com| www.947429.com-彩吧论坛论坛首页一| www.396467.com-周三周三开什么彩票| www.120893.com-快三万能码使用技巧| www.84553.com-山东彩钢板生产厂家| www.164440.com-彩票组六是什么意思| www.285353.com-彩票杀跨度技巧| www.465968.com-七乐彩历史号| www.642476.com-福彩形象墙图片大全| www.cp810.cc-网上快三能玩吗| www.509744.com-旧版手机彩客网| www.848765.com-彩光嫩肤-| www.999661.com-什么网站可以买彩票| www.zv28.com-福彩11选5走势图| www.839505.com-体彩票七星开奖公告| www.283254.com-七星彩奖表安装| www.432397.com-福彩三地百位走势图| www.658578.com-彩彩乐群英会走势图| www.592114.com-体育彩票选号秘件| www.br61.com-查一下七星彩开奖| www.265.org-彩钢可以用几年| www.611887.com-福彩3d方案详情| www.412300.cc-彩票可以复制出来吗| www.569668.com-好彩三开奖情况| www.657919.com-599彩票下载安装| www.738281.com-福彩微信-| www.917433.com-彩客网手机版完整版| 凤凰彩票www.77802d.com| www.mi06.com-好彩堂跑狗图| www.01ra.com-江苏快三冷号记录| www.9301.cn-网易彩票中奖怎么领| www.78699.cc-新加坡天天彩资讯| www.056488.com-1分彩票走势图大全| www.127430.com-日彩网-| www.628944.com-彩票开奘查-| www.845595.com-彩票分为几种类型| www.925239.com-彩6最新版本| 网易彩票www.9356x.com| www.cp6669.cc-北京快三是什么彩票| www.jx03.com-中国彩app-| 500彩票www.547677.com| www.138757.com-新彩彩票正规软件吗| www.vx55.com-河北快三彩票| www.01144.cc-彩票不能网购了吗| www.794525.com-重庆彩票投注网| www.885342.com-安徽快三官网开奖吗| www.951984.com-河内一分彩开奖原理| www.999655.com-福彩杀码定胆| www.ra8.cc-香港惠民彩票| www.ql93.com-福彩快3手机版下载| www.481062.com-和彩印退订-| www.69281.com-足彩最新对阵表| www.491646.com-排列及体彩其他玩法| www.013898.com-网络彩票代理违法吗| www.625331.com-体彩有哪些即开彩票| www.796549.com-冠彩网3d-| www.862782.com-更多精彩视频尽在| www.924806.com-最高额彩票-| www.987334.com-彩999彩票官方网| www.lb33.com-好运来彩票网址下载| www.09yp.com-彩8对战小游戏| www.887832.cc-七星彩历史比较器| www.596260.com-01彩票网页版| www.661413.com-彩票3d漏洞-| www.02ze.com-玩彩高手福彩3d| www.377.hk-彩票app漏洞| www.5241.cn-派彩是反水金额吗| www.776040.com-福彩助手手机版下载| www.861793.com-合肥体彩店报价图片| www.921707.com-五分时时彩计划软件| www.995588.cc-北单竞彩对阵表| www.ek9.com-上海快3爱彩乐| www.ku48.com-3地福彩字谜| www.008793.com-彩票开123-| www.396401.com-重庆周六开什么彩票| www.529175.com-新浪彩票双色球竟技| www.603691.com-女性梦见买彩票| www.665482.com-彩票带回血骗局| www.730896.com-麒麟彩票软件| www.793133.com-福利彩票真实么| www.862782.com-更多精彩视频尽在| www.919269.com-众乐乐彩票-| www.973780.com-南京娱乐快三| 500彩票www.348377.com| www.fm30.com-uu彩票改名了| www.ta43.com-必赢彩票网骗局揭秘| www.6yu.com-和彩读音-| www.925413.com-快三跨度计算公式| www.113994.com-江苏快三作假| www.203399.com-用数学破解彩票漏洞| www.75qf.com-易经买彩票-| www.1989.mobi-下载彩票bb网站| www.8991.in-凤凰彩票网怎么登录| www.538.biz-亿彩网app下载| www.3960.cn-奔腾彩票合法吗| 世彩堂www.5854y.cc| www.92396.com-竞彩足球投资技巧| www.bf30.com-易彩网跟买靠谱吗| www.d68.club-网络彩票网址大全| www.68mb.com-乐彩一用户登录| www.050721.com-彩票预测大师破解版| www.771161.com-朋友玩时时彩发财了| www.445696.com-彩票七彩星开奖今天| 亚投彩票www.ya619.com| www.419133.com-竞彩足球网点| www.567989.com-彩票6十1中奖规则| www.630526.com-小鱼正版彩吧图库| www.685054.com-双彩论坛字谜最大| www.739254.com-彩票智能杀号软件| www.791126.com-彩票选号怎么选的| www.844875.com-体彩甘肃11选| www.888915.com-神彩争霸官方下载| www.950674.com-彩运8是什么| www.993303.com-网上彩票怎么套利| www.cp8728.com-大发快三是否合法| www.699754.com-官方手机购彩软件| www.789194.cc-澳洲时时彩网站|