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.56560.com-彩53网站-| www.439552.com-7彩网怎么提现| www.602590.com-精彩彩票727网址| www.720150.com-如何选七星彩号| www.928999.com-大玩家彩票平台被黑| www.jc12.com-陕西快乐十分派彩网| www.778053.com-88彩票网l-| www.883708.com-湖北彩票彩王| 杏彩www.00840y.com| www.ld04.com-234彩票官方| www.66fr.com-3k彩票abb-| www.511847.com-大地彩排app| www.rg68.com-江苏快三和值大小| www.36oo.com-百万彩票平台| www.34yx.com-上海彩民中奖| www.1022.com-玖玖彩票网网登录| www.28853.cc-期期中彩票能玩吗| www.013697.com-i亿彩-| www.42091.com-彩票什么样-| www.020803.com-808七星彩长条| www.187337.com-时时彩买大小绝招| www.07xo.com-快三是怎么开奖的| www.121104.com-彩票群起名-| www.299875.com-91彩神做代理| www.113418.com-11进5是哪种彩票| www.195867.com-江西快三遗漏啥意思| www.296417.com-福彩快3qq群| www.365512.cc-时时彩怎么刷返水| www.a43.cn-足彩伤停实时更新| www.213885.com-快三每期开奖时间点| www.128974.com-蓝精灵彩吧b| www.085216.com-红旗彩票平台| www.7070.cc-彩96什么样-| www.4050.biz-幸福彩票官网| www.19948.com-易彩账号登陆| www.977959.com-彩色包装-| www.ch86.com-黑彩量刑-| www.zv82.com-体彩何时开通竞彩| www.90vy.com-宝马彩票是什么| www.576834.com-快三分布-| www.688590.com-北京体彩电话投注| www.831367.com-乞丐模拟器攻略彩票| www.935836.com-湖北福彩领奖地址| www.ek5.com-时时彩看计划稳赢| www.975437.com-多盈彩票平台注册| www.cai8999.com吉林省长春快三| www.709.hk-江西时时彩还有吗| www.628735.com-龙岩体彩中心| www.705249.com-体彩竞彩怎么兑奖| www.780828.com-彩客网完整比分直潘| www.852466.com-中福益彩-| www.911012.com-快三群里的图怎么发| www.968413.com-天律时时彩开奖历史| 500彩票www.645977.com| www.298162.com-河南省体彩中心电话| www.333141.com-体彩最新开奖结果| www.426866.com-下载彩票软件双色球| www.333467.com-新手买什么彩票| www.55bg.com-腾讯分分彩前三和值| www.059004.com-体彩排五-| www.335975.com-高频彩联盟-| www.wz65.cc-七星彩论坛头尾| www.980215.com-竞彩网比分直播新浪| www.59717.cc-彩虹裙-| www.078962.com-彩牛彩票是合法的| www.553080.com-盈发彩票下载安装| www.633497.com-七彩直播app下载| www.746126.com-e彩堂可靠吗| www.868559.com-本期七星彩图规| www.193116.com-江苏快三开奖结果| www.182295.com-佬牛胜负彩-| www.60252.com-赌吉林快三黑彩经历| www.67771.com-非法互联网彩票举报| www.x17.club-48彩票靠谱吗| www.471.me-北京快三限号是什么| www.9135.com-七乐彩历史走势图表| www.75527.cc-福彩3d彩吧图迷3| www.146089.com-竞彩足球彩客网比分| www.cj06.com-福彩字谜图谜总汇| www.668176.com-农村结婚彩礼多少钱| www.237491.com-辽宁省体彩兑奖地址| www.46bi.com-88彩-| www.182060.com-038彩票手机版| www.mk82.com-118彩票网络平台| www.004544.com-乐购彩网址-| www.961359.com-彩票五行八卦取数法| www.147856.com-福彩全民中奖独胆| www.470664.com-华彩赢家是违法| www.lz92.com-时时彩反倍投技巧| www.851102.com-极速时时彩有几种| www.303711.com-下载鑫彩网app| www.39358.com-豪彩vip网址| www.vw5.com-福建福彩快走势图| www.051841.cc-福彩金码试机号| www.867866.cc-七星彩35-| www.987999.cc-苹果彩票app软件| www.fp56.com-快三和值算不算中奖| www.210810.com-中华彩票信誉老品牌| www.582666.cc-怎么中不了彩票| www.153422.com-七乐彩拖胆投注表| www.650278.com-带博彩的成语| www.767979.com-德国官方彩种有哪些| www.902505.com-最新彩票报纸| www.975487.com-蚂蚁彩票计划软件| www.cai2677.com北京快三开奖纟结果| www.037332.com-彩经网遗漏值| www.94sn.com-体彩套利-| www.878631.cc-青岛体育彩票招聘| www.35657.cc-成功彩票平台| www.024514.com-财富彩票app下载| www.871875.com-彩票行家全年资料| www.939912.com-爱彩乐彩票下载安装| www.990242.com-官方时时彩怎么玩| www.bh29.com-传奇彩app-| www.626930.com-今日买彩票幸运数字| www.881.live-时时彩本金投注比例| www.5419.top-用彩铅画的画| www.4671.vip-一元彩票软件| www.505418.com-彩吧一板-| www.578480.com-众盈彩票客户端下载| www.955555.com-合肥竞彩销量| 500彩票www.50064c.com| www.448663.com-6538彩票-| www.761483.com-下载山东竞技快三| www.853107.com-福彩三b爱玩彩| www.939902.com-幸运彩票网注册| 亚洲彩www.68568n.com| www.79327.com-特彩666-| www.31265.cc-爱乐透彩票新版| www.301610.com-特区七星彩论坛精选| www.088739.com-云南时时彩开奖漏洞| www.zv43.com-8彩票app-| www.98448.com-分分彩对应公式| www.00ma.com-七星彩百位杀号| www.351556.com-竞彩老是输怎么办| www.818691.com-119彩票下载| www.875183.com-福彩3d彩吧全图| www.926266.com-彩6彩票手机版下载| www.970404.com-腾讯5分彩靠谱不| www.cai421.com-520快三平台| www.4521.cm-排列5论坛家彩网| www.676198.com-彩票守号多久能中奖| www.790242.com-彩票中奖生成| www.874291.com-808七星彩票网| www.957034.com-7k彩票网-| www.133510.com-彩色水泥-| www.38699.cc-308彩票蛋蛋| www.810676.com-悟空彩票有人玩吗| www.921701.com-福彩快三计划手机版| 彩乐乐www.cll168.com| www.pl03.com-随州论坛湖北快三| www.44eh.com-福彩3d怎样玩| www.149464.com-广东福彩领奖流程| www.288031.com-内蒙古福彩苹果下载| www.348342.com-七乐彩票靠谱吗| www.010375.com-彩票店主做庄| 500彩票www.330295.com| www.043967.com-彩票扫描兑奖| www.217076.com-福彩助手-| www.300013.cc-好彩票网站-| www.403449.com-下载海南七星彩论坛| www.518363.com-乐彩关注码历史记录| www.593717.com-七彩国际影城爱建| www.671079.com-速发彩票开多久了|