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天

知道了
彩01彩票 www.34750.com-网上赚钱彩票| www.0349.bid-彩票和值的计算方法| www.55bw.com-银彩通电话投注| www.59372.cc-爱彩票官方版| www.010203.com-赛车在线彩票官网| 天下彩www.847980.com| www.771118.com-重庆时时彩图片| 计划稳定版-dd彩靠谱不-| www.731151.com-顶级彩票网站网址| 8号彩票www.60108y.com| www.31814.com-易彩堂怎么破解| www.204722.com-彩经网内蒙快三| www.587199.com-网络高频彩怎么举报| www.027007.com-正规的彩票合买系统| www.165152.com-众购彩票网官网注册| www.936039.com-有人靠彩票发财吗| www.9qx.com-福d三彩开奖| www.2840.cn-体彩17241开奖| www.1151.net-98熊猫彩银-| www.9270.vip-彩票最好的书| www.99276.cc-时时彩任选-| www.138255.com-3地字谜总汇新彩网| www.300687.com-12彩票下载-| www.512097.com-彩铅画渐变色| www.086533.com-中国福彩自助终端机| www.220768.com-北京5分彩开奖记录| www.29jq.com-中奖彩票照片| www.00939.com-金誉彩票vip3| www.373719.com-500足球精彩比分| www.548098.com-分分彩怎么稳赢| www.683656.com-万购彩app下载| www.89373.cc-万彩彩票计划| www.11618.com-竞彩完场比分005| www.123419.cc-最新彩票信息网| www.6205.vip-3d今天彩圣字谜| www.335345.com-搜狐世界杯彩票| www.005501.com-七星彩宝贝-| www.986616.com-足彩310预测| www.94598.com-足彩模型-| www.106360.com-彩77安卓规矩| www.187866.cc-彩票的规律-| www.279050.com-3d福彩开机号| www.396669.com-国际财富彩票| www.573377.com-灯彩有哪些类型| www.664997.com-彩民借号中大奖| www.743907.com-629彩票-| www.832013.com-双色球机选买彩票| www.901236.com-福彩排五开奖号码| www.984432.com-外国彩票怎么买| www.nn1.com-福彩快三真的假的| www.ub90.com-快三最长连续多少期| www.40fo.com-温州塘下体育彩票买| www.1236.wang-彩世界下载app| www.737002.com-体彩三字谜-| www.816367.com-博彩被骗了怎么办| www.896028.com-一分快三计划破解版| www.970532.com-攻破彩票-| www.uq6.cc-中国体彩开奖查询| www.xd01.com-七星彩2233-| www.42iv.com-本金2000玩彩票| www.879279.com-快三必中高手| www.e90.org-福彩开奖号码双色球| www.50tv.cc-下载彩票软件双色球| www.668885.com-六彩宝典-| www.939595.com-新浪彩票大乐透走势| www.yw48.com-至尊彩合法吗| www.9699.me-老重庆时彩破解秘籍| www.91311.com-好彩四味爆珠多少钱| www.099752.com-快乐彩害人不浅| www.255908.com-彩富网高手一笑大全| www.370376.com-租彩票网站-| www.97id.cc-人生无彩排-| www.137472.com-成功彩票正规吗| www.8598.in-彩宝贝网工具| www.188693.com-彩票专业术语| www.291739.com-谁有鸿彩网址| www.383631.com-盈利彩官网-| www.cz81.com-福建快三规则| www.f51.cc-福彩论坛实战擂台| www.727.org-时时彩开奖计划| www.6198.cn-天天有彩票下载安装| www.27453.com-微信快三-| www.83896.cc-玩彩赚钱是不是真的| www.234362.com-彩票和赌博一样吗| www.465429.com-上海5d彩超医院| www.06110.com-彩经-| www.390112.com-福彩3d精选布衣| www.29uk.com-天下天空彩正版资料| www.9462.vip-外国买彩票最牛的人| www.8489.tv-新未来彩票二维码| www.db33.com-足彩分析师团队招聘| 13e彩票www.578960.com| www.if61.com-手机店买彩票怎么买| www.963695.com-一分快三开奖的软件| www.oj48.com-吉林市申请彩票站| www.79ur.com-30彩票走势图表全| www.9363.loan-福利彩票黑客事件| www.003586.com-足彩竞彩比分网| www.33af.com-淘彩是不是诈骗| www.387518.com-手机彩膜壁纸| www.69yv.com-彩虹六号探员小技巧| www.692912.com-足彩雪缘园比分直播| www.816639.com-南京市体彩兑奖中心| www.91547.com-紅好彩-| www.257092.com-玩黑彩快三能赢钱吗| www.484389.com-大发快三彩神8| www.675648.com-新浪爱彩十四场投注| www.992545.com-快乐彩票直选3开奖| www.922345.com-足球竞彩分析师招聘| www.vk7.com-今晚七星彩开奖结果| www.958459.com-微信口袋彩店二维码| www.9927.red-七乐彩下期专家预测| www.66323.com-内蒙古快三和值| www.055553.com-极速快三在线| www.143378.com-梅花易数测彩票| www.284552.com-彩票站行情-| www.380010.com-益彩纷呈-| www.512655.com-枫叶彩铅画过程| www.600010.com-彩票店会赔钱吗| www.754078.com-腾讯分分彩挂机| www.873016.com-快发彩票app| www.966234.com-江苏快三遗漏推存| www.82ne.com-七星彩差分视频| www.736006.com-中彩票的手纹| www.384021.com-美国28彩票平台| www.92863.cc-致富彩重庆时时彩| www.574055.com-彩票代打qq群| www.770358.com-彩票站干黑彩| www.015854.com-鸿运彩票是骗局么| www.043738.com-扫一扫彩票-| www.952606.com-彩k-| www.979.red-鳄鱼彩票预测汇总| www.99853.cc-彩6网站-| www.152505.com-491.cc彩票网| www.511498.com-时时彩平刷技术| www.749209.com-汇彩国际信誉平台| www.312128.com-福建福彩快讯电子报| www.856013.com-彩票真的会中奖吗| www.998942.com-今日头条彩票| www.pr38.com-彩吧3d预测-| www.0839.net-网上禁止买足彩| www.053.date-上海福彩3d走势图| www.9182.biz-手机购买体育彩票| www.54900.com-厘模式彩票-| www.028629.com-五行预测彩票的方法| www.cz08.com-下载彩神vl-| www.159013.com-彩票开奖百度一下| www.575387.com-福彩3d乐采网| www.9379.biz-去柬埔寨做博彩| www.vt87.com-如何网购3彩票| www.cp8487.com-内蒙古快三历史遗漏| www.199701.com-体彩481开奖视频| www.9158.cc-新彩吧3d图迷总汇| www.021744.com-熊猫竞彩无网络| www.97028.com-彩票刷规划-| www.123308.com-彩票翻倍追号要死人| www.974663.com-七星彩坛论-| www.137941.com-快乐2019彩票| www.342424.com-好彩频道app| www.549646.com-欧冠足彩app| www.674999.com-汇丰彩票是正规的吗| www.771118.com-重庆时时彩图片| www.905234.com-彩票网赚是真的假的| 财神网www.29277r.com|