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.64qk.com-足彩投资策略| www.057080.com-彩神能玩不-| www.564444.cc-福彩流动彩票车| www.813915.com-内蒙古福彩一定牛| www.174878.com-快三代理官网| www.273944.com-时时彩1分彩计划| www.376269.com-亿博彩票准计划| www.549706.com-哪里可以购买足彩| www.677662.com-重生彩票大亨| www.818899.com-非你莫属彩票高手| www.933535.com-快三犯法吗-| www.az27.com-爱彩通app-| www.42xj.com-招聘彩票计划员| www.699359.com-天天彩选4开奖号码| www.498879.com-体彩大乐透中四前区| www.717810.com-河北快三出奖号码| www.943991.com-春秋彩票苹果官网| www.bc87.com-福彩3d开奖直播| www.5013.vip-盛京彩票-| www.cai0707.com江苏快三一定牛| www.511.pw-大发快三交流群| www.936644.com-体彩无人彩票机无锡| JJ彩票www.61411.cc| www.kp67.com-江苏省福彩兑奖地址| www.l18.club-福彩排列七开奖号码| www.45vk.com-cp009彩票-| www.1359.vip-福利彩票是不是真的| www.6732.biz-竞彩推荐预测总汇| www.22214.cc-人人竞彩1.0.1| www.62287.com-大赢家彩票平台下载| www.013404.com-南国彩票论坛七星新| www.088001.com-共赢彩票计划| www.171722.com-上海快三走势图表| www.248183.com-吉林快三能玩吗| www.322383.com-竞彩8串28-| www.386906.com-快乐彩中奖金额| www.487486.com-3d说彩-| www.558333.com-海南博彩业放开| www.631058.com-好友游戏彩票分彩| www.701252.com-彩票输了说给你包赔| www.778243.com-一分钟快三走势图| www.859806.com-福彩双色球几点封盘| www.927515.com-有4个数字的彩票吗| www.983359.com-盈彩在线是合法的吗| www.da65.com-彩票99注册送19| www.sx26.com-彩票都是几位数| www.6mo.cc-彩票中的数学理论| www.64ib.com-好的足彩推荐公众号| www.0627.vip-易彩排五开奖号| www.5569.me-贵州省福彩站点查询| www.02771.com-3d彩神通-| www.48026.com-手机买福彩官网下载| www.91858.cc-《中彩那天》| www.051107.com-天福彩票官方网站| www.130502.com-一定牛彩票足彩| www.198283.com-湖北快三必出号| www.268969.com-彩票2元网走势图| www.333433.com-分分彩手机计划软件| www.404123.com-七星彩是不是有托| www.503234.com-鸿彩彩种-| www.577112.com-乐仑彩票人人猜球| www.639122.com-余姚体彩中心在哪里| www.708466.com-探探男彩票托| www.785900.com-福彩双色球139期| www.851240.com-时时彩大小公式| www.906043.com-沉迷彩票人的心理| www.963407.com-内蒙古快3预测彩乐| 大赢家彩票平台www.103658.com| www.fz70.com-买彩票的app| www.wn04.com-中彩娱乐网-| www.15bg.com-因为彩礼钱分手微信| www.86iy.com-金利彩票官网客服| www.3096.org-大发时时彩五码计划| www.8615.xyz-彩视怎么做-| www.36592.cc-澳博彩票可靠谱吗| www.83ex.com-彩印基础包怎么设置| www.712114.com-快三是有人控制嘛| www.804035.com-一分极速彩票网站| www.35yo.com-体彩顶呱刮7票| www.3375.pw-下载天天中奖彩票| www.12821.cc-彩漂有什么用| www.54333.com-自助申请app彩金| 彩71www.005845.com| www.a61.club-重庆时时开彩龙虎和| www.59308.cc-福利彩票咋申请| www.137960.com-日本彩票新闻| www.212226.com-快三彩票平台有哪些| www.317565.com-彩票查询排列五今天| www.720353.com-59博彩论坛-| www.818161.com-足彩新浪比分| www.925408.com-彩6下载手机版旧版| www.997556.com-糖果彩螽鸣虫| www.tw6.com-易彩彩民测速| www.sm12.cc-广东快乐彩走势图| www.50wp.com-有哪些彩种是官方的| www.00571.com-彩票店加盟电话| www.84377.cc-彩钢瓦规格及价格| www.040880.com-黑桃k彩票怎么样| www.201184.com-七星彩十大专家预测| www.278856.com-手机怎么买彩票| www.464297.com-多彩娱乐用户登录| www.583776.com-彩票特别号如何预测| www.671842.com-彩宝网是正规的吗| www.790307.com-形容炫彩的词语| www.862390.com-酷彩彩票靠谱吗| www.941104.com-大发快三代打| www.z30.xyz-时时彩赢彩王好用吗| www.857653.com-彩之源网页-| www.933578.com-玩彩票输了-| www.981498.com-3d彩票票样图| www.2556.in-追彩票冷号方法| www.7573.top-彩彩虫官方免费下载| www.99221.cc-极速时时彩五星必中| www.073798.com-彩博是什么意思| www.266946.com-今晚上彩票开奖结果| www.425335.com-人人体彩网-| www.637101.com-彩虹六号黑号| www.767618.com-体彩e球彩总进球| www.875931.com-网上买彩票能中奖吗| www.974741.com-快三对子号怎么倍投| www.bk82.com-彩票106cc苹果| www.tj57.com-福彩迷江苏快3| www.05ug.com-新手彩铅用什么牌子| www.75pe.com-旋子彩画名词解释| www.1541.vip-今日福彩3d走势| www.8314.vip-福彩中奖到哪里兑奖| www.35562.com-福彩3d历史开奖| www.92918.cc-希腊五分彩开奖| www.072091.com-加州时时彩开奖记录| www.158474.com-足彩app北单下载| www.234533.com-福彩中国龙888| www.315928.com-体彩开过电话号码吗| www.388837.com-搜福彩3a开奖号| www.892265.com-下载3d福彩-| www.960907.com-微信快三骗局解密| 大赢家彩票网www.54400y.com| www.ed25.com-彩票大发快3怎么买| www.su86.com-体彩顺序不对中奖吗| www.31vp.com-体彩双休日兑奖吗| www.899.cm-nba篮彩258-| www.4129.cm-沙特评价彩虹无人机| www.09508.com-新彩票安卓下载| www.57904.com-978cc彩票-| www.008546.com-16号的体彩开奖号| www.095646.com-代玩幸运5快三| www.165664.com-1068彩票免费| www.233289.com-北京快三购买平台| www.317192.com-足彩伤停实时更新| www.390936.com-拳皇全彩本子| www.472688.com-生肖福利彩票| www.543221.com-体彩赢刊官网| www.582176.com-阳光彩票注册地址| www.550077.com-彩视软件怎么开直播| www.cp5765.com-k3彩票是真的吗| www.1065.vip-跟彩名堂相似软件| www.556153.com-乐彩神是正规的吗| www.779871.com-中彩易下载-| www.yo72.com-下载彩68-| www.463996.com-韩雨轩七星彩预测| www.623952.com-九歌彩票中奖纠纷| www.12161.com-福彩规律最准| www.hw91.com-彩票组三什么意思| www.2sw.com-重庆有极速时时彩吗| www.062.gg-宁波体彩领奖在几楼|