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.636868.com-小鸡彩虹里面的歌曲| www.74474.com-七乐彩4十1中多钱| www.92883.cc-九号彩票登录注册| www.39359.com-uu快三合法吗| www.894808.com-中国福利彩票交流群| 吉利彩票www.80075c.com| www.23712.com-我要跳快三慢跳| www.78363.cc-美国28彩票走势| www.033098.com-鹤壁福彩-| www.509837.com-中国彩票彩吧图库| www.pu89.com-98娱乐彩票入口| www.216256.com-体育彩票玩法| www.312999.com-鑫彩彩票平台真假的| www.15rb.com-今日体彩排列五奖号| www.630046.com-福都彩票噢门5分| www.745581.com-顶尖彩票app下载| www.849233.com-足彩碰到法乙怎么猜| www.355172.com-河内彩-| www.036420.com-爱玩彩票下载| www.981347.com-刮刮乐彩票透视镜| www.2704.cn-v9彩票真的假的| 亿彩www.6832y.com| www.bc70.com-北京多乐彩合法吗| www.81998.com-买彩票中奖前的征兆| www.638768.com-福彩慈善事业| www.603632.com-pk31彩票-| www.128012.com-彩虹宝宝主题曲| www.220213.com-河北快三开奖结| www.599016.com-699彩票靠谱吗| www.5459.cn-体彩投注站收入| www.983430.com-犀牛彩票赌博| www.cj42.com-安徽快三奖金图| www.f74.loan-下期的彩票中奖号码| www.638182.com-足彩竞彩吧-| www.740741.cc-港股中的博彩股| www.823409.com-附近最近的彩票点| www.910924.com-k彩娱乐手机客户端| www.976267.com-红彩会hch555| www.c7.tv-快三怎么赔-| www.6338.bid-摇发彩票听过吗| www.25996.com-关于彩虹的寓意| www.774427.com-手机机选彩票| www.901530.com-福彩体彩开奖结采| www.993319.com-足彩论坛-| www.dn54.com-贵卅快三-| www.vn95.com-查七星彩开奖结果| www.8429.pw-江苏竞彩网-| www.073833.com-财神彩票网靠谱吗| www.4611.vip-彩票只能实体店买吗| www.577572.com-七星彩开奖预测宝贝| www.304356.com-吉林快三计划打开| www.654321.com-福彩销售截止时间| www.151958.com-彩之网3d绕胆图| www.33243.com-19046足彩-| www.84840.com-牛彩涂3d牛彩图库| www.364348.com-福彩倍投-| www.459800.com-800vip彩票-| www.554071.com-晨兴彩票手机版| www.645892.com-彩票稳赢投法| www.724818.com-彩票双色球十大杀号| www.823271.com-58福彩网页-| www.894819.com-彩票赚钱软件排行榜| www.962871.com-汉中体彩中心电话| 彩天下www.196303.com| www.go31.com-河南订婚可以退彩礼| www.14eq.com-福利彩票3d广播台| www.18393.com-深圳彩票中心在哪里| www.vs98.com-福彩开奖彩票网| www.036486.com-金日彩票-| www.57329.cc-够彩app-| www.015878.com-唯彩会双色球| www.007009.com-中原风彩最新开奖号| www.8989.in-中圄竞彩网首页| www.192885.com-758彩票app-| www.550588.com-买彩票神器中奖| www.633606.com-天下彩免费手机资料| www.698652.com-k彩彩民福地注册| www.828297.com-春天彩票下载| www.913239.com-彩客彩票不能买| www.978425.com-彩色路面施工工艺| www.im6.com-快三专家预测推荐| www.872593.com-福利彩票时时彩结果| www.580865.com-福彩和尾振幅| www.204048.com-5d彩化-| www.870396.com-彩票投注平台哪个好| www.952836.com-旺彩推荐号码| 盛彩网www.41518.com| www.tc8.com-吉林福彩3d走势图| www.291519.com-内蒙快三综合| www.486339.com-怎么研究彩票走势| www.654288.com-幸运彩52ⅹyc| 汇彩网www.968566.com| www.051330.com-天福彩票是黑彩吗| www.688480.com-山东福彩公众号| www.105670.com-重庆时时彩官苹果| www.590199.com-星彩网址-| www.661588.cc-足彩8串8玩法介绍| www.fw44.cc-黑彩快三有没有赢的| www.433318.com-奔腾彩票72723| www.q23.xyz-北京体彩中心电话| www.881150.com-百姓网彩票站出兑| www.717047.com-先学线描还是彩铅| www.791467.com-2118彩票网下载| www.5518.top-飞跃彩虹韩剧| www.066754.com-五分快三必出码技巧| www.843992.com-山东福彩群英会好处| www.945911.com-乐八彩票害死人| 福运www.fyyy3.com| www.rv13.com-博牛彩票是合法的吗| www.31ba.com-竞彩篮球职业| www.010881.com-河南快三玩法图| www.917338.com-中国竟彩网页| www.978464.com-彩色沥青道路建设| www.cp3382.com-江苏快三是什么彩票| www.8995.xyz-2019积分换彩票| www.059816.com-中国彩票直播频道| www.360.xyz-37彩票网站-| www.283664.com-来一组彩票号| www.74977.cc-分分彩输了怎么办| www.12008.com-购彩软件哪个好| www.479520.com-福彩3d数字云平台| www.400865.com-彩票系统平台开发| www.4395.cn-01彩票自带app| www.235660.com-山东彩票论坛3d| www.678635.com-中国竞彩网触屏版| www.770104.com-下载好彩头-| www.838875.com-丹麦28彩票怎么玩| www.898038.com-中国福利彩票图案| www.962128.com-江西福彩助手ios| 彩票5www.542676.com| www.571.red-重庆时时彩破解规律| www.14093.com-汪汪时时彩下载| www.556686.cc-高频彩票改时间了| www.678251.com-重庆彩必赢计划下载| www.753775.com-电信手机余额买彩票| www.296353.com-即时开彩官方下下载| www.377898.com-王者勋章彩虹行动| www.488155.com-福彩3d排序图| www.568894.com-梦见彩票中奖数字| www.649939.com-彩民周刊小宋双色球| www.720260.com-七星彩经常开的规律| www.810010.com-球探彩客彩票登录| www.cc09.com-高频彩如何长期赢钱| www.153173.com-分分彩公式-| www.273897.com-5分快三玩法| www.tj80.com-彩3彩彩票骗局| www.144565.com-大发时时彩破解| www.529249.com-彩票计划软件安卓| www.572638.com-时时彩独胆在线计划| www.nq44.com-福彩怎么选号| www.1233.mobi-研彩软件在哪买| www.944822.com-体彩图片大全| 众发彩票www.669zf.com| www.448370.com-彩票周几开奖| www.689590.com-山东晓艳七乐彩预测| www.787449.com-聚彩论坛网址是什么| www.898155.com-足球彩票专业术语| 500彩票网www.65707x.com| www.865862.com-熊猫彩票app官网| www.989281.com-手机51中彩彩票| www.39ym.com-菲律宾彩票包网服务| www.sk3.cc-老时时采彩开奖| www.7722.pw-买彩票5元都很难中| www.387392.com-3d彩票走势图软件|