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.080343.com-198彩官网-| www.230147.com-大发快三骗局输钱| www.319828.com-易彩娱乐测速| www.403982.com-七星彩2237图规| www.521861.com-和彩印怎么设置使用| www.603572.com-河南福彩中心官网| www.686893.com-体彩竟彩网手机版| www.777273.com-彩神通软件苹果下载| www.854816.com-运彩网入口-| www.935056.com-彩六苹果怎么下载| 爱米彩www.am7588.com| www.ev22.com-大奖彩票-| www.xv93.com-河北体彩任选5遗漏| www.31mb.com-预测港彩生肖及方法| www.2629.pw-外国彩票开奖视频| www.8757.cn-顺盈彩票可靠嘛| www.52235.cc-中国电信的彩铃网站| www.99755.com-巨人彩票app| www.071718.com-体育彩票营业时间| www.134032.com-足球足彩网比分直播| www.216899.com-省份快三犯法吗| www.286157.com-彩票十一选五玩法| www.521355.com-七乐彩开奖历史重号| www.588137.com-福彩综合版走势图| www.656818.com-亿彩网合法吗| www.793228.com-七天国际时时彩平台| www.873627.com-富彩娱乐app| www.989797.com-彩吧助手开奖| www.bs8.cc-3分彩骗局-| www.ov22.com-河北快三倍投表| www.03ws.com-第九彩票-| www.76jl.com-彩经网七乐彩开机号| www.1737.in-鸿发彩票骗局| www.00757.com-福彩3d村黄金蛋吗| www.60904.com-保定市彩票站| www.023695.com-海南彩票门户网| www.101153.com-彩运快三-| www.171038.com-玩彩口诀-| www.278792.com-玩彩票的真实经历| www.368867.com-古典美人彩铅画图片| www.469306.com-青海快三助理| www.557788.cc-九彩凤凰图片大全| www.629916.com-3d福彩直播-| www.708672.com-河北彩票吧百度贴吧| www.789410.com-竞彩app对比| www.867741.com-南国七星彩票规律图| www.983072.com-盈彩吧是什么| www.ai30.cc-海南七星彩开奖结果| www.sv51.com-七星彩公式计算软件| www.14wn.com-彩票机致万人中奖| www.002.bid-福彩三d图库三毛| www.3695.biz-a8彩站-| www.9374.com-去国外彩票公司工作| www.59978.com-彩票店私自坐庄| www.020222.com-体利彩票开奖结果| www.092228.com-一分彩是假的吗| www.161705.com-香港福彩票开奖结果| www.268062.com-湖北快三基本走势| www.356838.com-3d彩票如何看票面| www.445193.com-中国体彩排五| www.537621.com-彩色的贝壳造句| www.644404.com-腾讯5分彩下载| www.731498.com-易彩注册链接| www.803890.com-世界杯那里买彩票| www.877559.com-福彩快3豹子号前兆| www.970310.com-七彩球中奖-| www.cai3499.com内蒙古快三网| www.ky95.com-9福建体彩十一选五| www.f96.loan-体彩今日字迷总汇| www.37gh.com-盈丰团队彩票| www.0932.me-app彩69-| www.10421.com-新浪足彩预测网| www.53848.com-篮球博彩单节最高分| www.97047.com-山东体彩app注册| www.062691.com-排列五星彩开奖结果| www.172722.com-乐彩网1分快3破解| www.257617.com-云南11选5爱彩乐| www.331094.com-河北彩票app| www.399667.com-彩90-| www.536708.com-浙江福彩3d派奖| www.615999.com-福建快三怎么玩稳赚| www.688323.com-东莞体彩官网| www.763769.com-足彩咖-| www.866476.com-体彩开奖结果昨天的| www.931623.com-计划彩票老师带单| www.984759.com-竞彩网足球计算器| www.cx80.com-彩票密码-| www.tv46.com-彩票下载平台| www.82.cx-彩虹写个比喻句| www.64lz.com-众彩网合不合法| www.0545.xyz-彩尊登陆网址| www.8680.in-家彩网排三试机号| www.37255.com-多彩网网站-| www.81339.cc-香港福彩商报精简| www.030006.com-内蒙体彩十一选五| www.102649.com-6678彩票合法麽| www.164658.com-足彩360足球直播| www.283937.com-彩票是几位数| www.365622.com-竞彩足球必胜技巧| www.448456.com-专家说彩-| www.533302.com-体育彩票试机号码| www.630886.com-双彩网站-| www.697018.com-福利彩票开奖软件| www.771783.com-多彩贵州的含义| www.871888.com-友恒陕西利彩快三| www.948231.com-排五走势彩宝网| www.997401.com-福彩乐透客户端| www.jy0.cc-江苏福彩开奖公告| www.np95.com-河北快三开奖结果图| www.1nw.cc-六安体彩店转让| www.50jz.com-足彩盘口分析口诀| www.548.me-现在手机能买彩票吗| www.3789.net-七星彩票海南论坛| www.8758.org-人工智能能玩彩票吗| www.60151.com-彩票多少钱交税| www.011219.com-快三高手下注| www.075628.com-瑞彩网快3-| www.133774.com-好彩高手论公式| www.201068.com-七星彩公式计算| www.265214.com-广西快三怎样| www.378162.com-周口体彩8选5| www.491936.com-博汇彩票能赚钱吗| www.558465.com-彩票顶呱刮官方网站| www.619098.com-体育彩票在线购买| www.680801.com-怎样戒掉买彩票的瘾| www.750772.com-网上说破解彩票平台| www.811612.com-新浪足球彩票彩票| www.877231.com-七乐彩专家开机号| www.981751.com-大成彩网是真的吗| www.ag3.cc-体彩跨度走势图| www.md09.com-三分彩官网开奖结果| www.s28.xyz-双阳黑彩小哈| www.42ed.com-世界杯足彩比分竞猜| www.209.pw-精美水溶彩铅画图片| www.3007.vip-时时彩后三组六7码| www.8123.biz-体彩那个电视台开奖| www.22582.com-九州彩票下载| www.60743.com-甘肃体彩中心电话| www.113199.com-买彩票危险吗| www.171879.com-快三高手教学| www.258449.com-足彩19046-| www.322625.com-好的正规的彩票网站| www.383736.com-彩客网老版本| www.512144.com-用彩铅画动物图片| www.577589.com-七星彩预测头尾| www.639685.com-怎么才能把竞彩卖好| www.738580.com-我的彩票双色球| www.804112.com-那个网址可以买彩票| www.869209.com-巨丰彩票下载| www.958406.com-中彩手彩票客服电话| 彩票驿站www.2350r.com| www.ay53.com-江西省体彩中心地址| www.qq73.com-中国福彩文化理念| www.03vg.com-体育彩票山东试点| www.63go.com-彩票发行管理办法| www.916.me-香港彩宝典软件下载| www.4376.cn-2009年福彩和值| www.8986.bid-凤凰彩票的老板| www.64433.cc-皇冠足彩跟单软件| www.016798.com-福彩3d组合胆拖| www.074644.com-500万彩票预测| www.129317.com-腾讯分分彩破解高手| www.195365.com-江西快三推荐一定牛| www.259604.cc-彩票模拟选号app|