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.283189.com-七星彩怎样领奖| www.519206.com-家彩开机-| www.05118.com-中彩在线公司在哪里| www.36302.com-百乐彩骗局-| www.742985.com-皇家彩世界网址多少| www.661078.com-胜负彩19年1月| www.766703.com-超级快三是不是真的| www.768727.com-好彩0567hh-| www.902825.com-彩票销售平台怎样做| www.981170.com-体育彩票排列三周六| www.ah42.com-七星彩基本走势图表| www.yr29.com-体彩排列五长条| www.zy81.com-竞彩一年挣百万| www.41113.com-彩6官方彩票网站| www.101237.com-香港5分彩有计划吗| www.015376.com-福卅体彩31走势图| www.130460.com-体彩自助兑奖| www.961634.com-古建筑彩画拍卖品| www.a78.net-彩票恒等式-| www.65of.com-豪彩平台注册送钱| www.86714.com-好彩频道直播回放| www.672635.com-3d之家福彩-| www.925279.com-体彩排三杀号定毒胆| www.bm96.com-珍爱网彩票男| www.32gl.com-18058期七星彩| www.26578.com-苹果原彩显示| www.3286.biz-华宇彩票下载安装| 500彩票www.26299h.com| www.948981.com-国彩彩票是官网吗| 网易彩票www.085wy.com| www.507792.com-老徐说彩今日p3| www.612579.com-幸福彩推荐号码陆金| www.717586.com-彩铅画玫瑰教程| www.803669.com-七星彩算组技巧| www.918842.com-澳门博彩一年税收| www.985838.com-福彩3字迷图迷总汇| www.pv82.com-手机珠江彩票图片| www.08yu.com-福彩贪污1360亿| www.657.mobi-福彩3d中彩票| www.702592.com-明彩彩票app代理| www.791655.com-宁夏福彩中奖记录| www.282997.com-彩之家全部彩种| www.27358.com-爱彩乐走势图江苏快| www.003682.com-哪个平台能玩彩票| www.10888.cc-被华夏彩票黑了| www.9312.biz-趣味彩球下载游戏| www.427786.com-仁信彩票下载安装| www.099888.cc-南方彩票app| www.0918.bid-福彩3d追号稳赚| www.79io.com-福彩双彩网论坛| www.53610.com-盐城竞彩店-| www.576439.com-福利彩票倍数和注数| www.769635.com-好彩香烟辨别真假| www.913257.com-广西快三闯关计划| www.sa9.com-上海11选5彩经网| www.15aj.com-e彩乐手机版| www.75zt.com-七乐彩红球杀1个号| www.076150.com-彩票开户设置返点| www.7660.vip-彩票素材-| www.531441.com-重庆时时彩合法吗| www.47745.com-福彩单双邀请码| www.048338.com-江苏体彩官网| www.137438.com-跟计划买彩票真的吗| www.882928.com-网上买彩票亏了| www.948308.com-彩票哪个中奖率高| www.998759.com-明发彩票主页| www.qx9.com-传奇彩票快三靠谱吗| www.rw69.com-乐彩客户端下载| www.420862.com-体彩店怎么装修好看| www.133389.com-围挡彩钢围挡价格| www.955354.com-凤凰彩票辅助器| www.or45.com-地方彩票开奖公告| www.2488.pw-手机扫描彩票中奖| www.00053.com-汇力彩色印刷包装| www.52192.cc-爱乐彩十一选五云南| www.062093.com-好彩客平台正规吗| www.042028.com-彩王布阵专栏| www.81899.com-快三今日预测江苏| www.036176.com-彩票统计表怎么做| www.455544.com-亿元中奖彩票| www.927975.com-时时中彩票官网手机| www.248999.cc-互联网彩票销售办法| www.086591.com-七乐彩9中5多少钱| www.124577.com-高频彩漏洞吧| www.818094.com-今日头条天下免费彩| www.f47.com-彩票网址大全网址| www.73be.com-七星彩局王长条期| www.3103.in-智慧彩挂机软件编程| www.9026.loan-体彩nba竞猜分析| www.2933.in-怎么做网络彩票代理| www.8113.me-巨弘国际彩票| www.266032.com-宁夏福彩快三玩法| www.730069.com-大家乐彩票注册| www.839439.com-体彩排列五历史遗漏| www.911361.com-体彩排五-| www.978573.com-九歌彩票-| www.cd.com-搜索河北快三| www.675247.com-搜狐福彩走势图| www.306435.com-赌博彩票app| www.458874.com-买cba篮彩-| www.537718.com-深国彩-| www.617028.com-u9彩票799-| www.76795.com-大优彩票怎么样| www.072836.com-丹麦快乐彩选五计划| www.96241.com-福彩千亿案件| www.638612.com-上海体育彩票总店| www.731954.com-易赢彩票骗了多少人| www.807313.com-彩票50-| www.900539.com-小军福彩三d图| www.992000.com-时时彩组选包胆玩法| www.hd09.com-福利彩软件是真是假| www.448632.com-丫头说彩公众号| www.551533.com-福彩快乐彩概率| www.746815.com-500彩票坑不坑| www.837364.com-彩票nba买球| www.958470.com-福彩快3推荐号| www.cai985.cc-福彩快三规则| www.456383.com-今天旺彩预测3d| www.541901.com-亚洲彩票信誉平台| www.626750.com-彩票633.cc-| www.5636.biz-cbcp彩票-| www.20518.com-app九度彩票| www.985608.com-正义彩虹志愿者协会| www.661042.com-宝岛国际彩票| www.238810.com-彩金套利教程| www.305378.com-七乐彩35期-| www.366176.com-水溶性彩铅怎么用| www.470208.com-快乐六分彩-| www.553353.com-竞彩半全场玩法| www.062484.com-彩九登录网站| www.126387.com-全彩本子-| www.957394.com-新时时彩彩票大赢家| www.cp5929.com-快乐彩开奖结果今天| www.kc41.com-广州彩票兑奖地点| www.67nz.com-竞彩让球十2怎么打| www.126410.com-彩拾违法吗-| www.189893.com-皇都彩票能提现吗| www.399877.com-彩票分析家-| www.667322.com-体彩公信力-| www.793199.com-腾讯五分彩官网开奖| www.896543.com-广东快三计划群| www.967354.com-快三万能码使用技巧| www.am37.com-贵州体彩领奖中心| www.1to.com-福彩3d五行走式图| www.229.cm-爱购彩快三-| www.739059.com-玩彩票用什么软件| www.618510.com-经营福彩还是体彩好| www.78ys.cc-星彩网是什么| www.092169.com-体育彩票论坛| www.944959.com-体彩刮刮乐出7制胜| www.zf7.com-彩票大乐透走势图| www.02qv.com-e球彩总进球数规则| www.358492.com-七星彩中奖助手| www.686668.cc-中国彩票客户端| www.a37.loan-多期彩票怎么兑奖| www.45lg.com-苏式彩绘图片大全| www.1693.net-高手彩坛—彩票大全| www.140026.com-贵阳福彩网站| www.204206.com-江西快三官网购买| www.034934.com-彩71官网下载| www.ln65.com-怎样下载中彩网| www.123760.com-刮刮彩代理-| www.985081.com-二分彩计划软件下载| www.15cc.com-七星彩1到9的合数|