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.034782.com-委托买彩票-| www.414.org-体育彩票官方客服| www.17804.com-北京福彩赛车论坛| www.309407.com-韩国彩票在哪里买| www.7933.cm-头彩彩票首页| www.672.website时时彩后三组六组三| www.145320.com-福利彩票店提成八点| www.322223.cc-hk彩票网址大全| www.542153.com-用彩绳编头发的视频| www.44214.com-海南7星彩开奖结果| www.570976.com-七彩西游记在线豆丁| www.028628.com-365彩票网-| www.877946.com-彩票计划大师| www.974385.com-彩虹旗泡泡弟论坛| www.mi3.com-彩票开奖查询大全| www.092204.com-吉林快三图微信群| www.934787.com-体彩高频机顶盒| www.875328.com-每分钟一开奖的彩票| 500彩票www.652861.com| www.536541.com-哪个彩票最好中奖| www.626228.com-久久发彩票靠谱吗| www.15vg.com-彩票系统出租贴吧| www.558331.com-足彩任选九贴吧| www.132663.com-开彩票店的风险| www.30lz.com-软件控制极速时时彩| www.788132.com-新浪足彩开奖| www.429283.com-利彩开奖下载| www.226865.com-体彩22走势图| www.338789.com-98彩票网手机| www.465365.com-下彩网安卓客户端| www.987938.com-3d今天的彩报| www.911657.com-福利彩票新彩网| www.939422.com-福彩选四-| www.230079.com-共享彩票是坑人的么| www.350532.com-彩票店里还能卖什么| www.858472.com-三彩家租房靠谱吗| www.989938.com-彩飘剂-| www.759992.com-下载时时彩计划软件| www.pv08.com-go彩票是真的吗| www.9384.cc-马来西亚博彩业现状| www.53251.cc-发彩网外挂-| www.370151.com-排列五走彩宝贝| www.763795.com-足彩咖下载-| www.911658.com-怎么开体彩店| www.108568.com-七星彩中了三个数字| www.220410.com-三分时时彩破解软件| www.871241.com-乐赢彩票下载| www.951305.com-澳客彩票app下载| www.ke27.com-中彩票的人-| www.2wb.cc-辽宁福利彩票资料| www.68ft.com-三地彩吧图迷| www.4701.cn-彩神群-| www.21974.com-网上说刷彩是什么| www.888539.com-安装95彩-| www.971504.com-手机购买彩票合法吗| www.cp7958.com-河北快三万能码| www.rs20.com-牛彩网摘采网| www.612246.com-福彩3d胆码神算| www.3430.xyz-易网彩票怎样下载| www.6427.cc-彩神争vii-| www.151773.com-红中彩票那个有网站| www.498948.com-竞彩足球扣税吗| www.127796.com-福建体彩彩票| www.699294.cc-中国福利彩票大乐透| www.9086.biz-本期体彩开奖号码| www.78795.cc-苏州竞彩店申请| www.cu42.com-淘彩票平台-| www.tc64.com-幸运时时彩人工计划| www.633311.com-竞彩足球能买篮球吗| www.987164.com-彩店宝彩票可靠吗| www.97lq.com-天下彩址大全| www.507888.cc-浙江体育彩票微信号| www.kx5.com-安徽安徽快三形态| www.651011.com-动物水彩画简单可爱| www.782243.com-凤凰彩票钱提不出来| www.562726.com-广西体育彩票得奖者| www.711696.com-时时彩后四万能码| www.790661.com-彩票随机数生成器| www.874984.com-时时分分彩骗人吗| www.cp8638.com-幸福快三是合法的吗| www.10nj.com-排列三彩票下载安装| www.193322.com-微信买彩票怎么买| www.288863.com-彩票123网址导航| www.0726.org-锋彩直播官网4.0| www.521.cm-石家庄彩票兑奖中心| www.825695.com-融彩网是啥-| www.905762.com-网络黑彩处罚| www.970790.com-大学生破解彩票| 55彩票www.755740.com| www.gz03.com-彩八正版下载| www.wl29.cc-彩票怎么看走势| www.93jf.com-重庆五分彩规则| www.280798.com-时时彩官方平台| www.689812.com-微彩娱乐网址| www.793663.com-福彩3g开奖结果| www.902406.com-彩票自助售票机| www.963622.com-彩铅风景画图片| www.973427.com-彩虹宝宝歌词| www.ip54.com-烟台福彩中心官网| www.159836.com-仙彩官网下载| www.764.cm-时时彩如何看遗漏| www.6468.vip-体彩网络销售平台| www.1991.com-足彩滚球技巧| www.9866.bid-连云港体彩中心地址| www.700035.cc-瑞典2分彩人工计划| www.791381.com-中国福利彩票下注| www.872416.com-3d彩吧专业助手| www.932308.com-怎么玩七星彩三字定| www.991144.com-七星彩玩儿法| www.wm00.com-123彩票网站| www.70pq.com-彩易画迷-| www.008942.com-七星彩十位专家预测| www.104119.com-足彩推荐分析310| www.vm20.com-福彩一等奖多少钱| www.123547.com-彩票专业带赚老师| www.555224.com-下载全民体彩| www.637628.com-彩虹6号难-| www.526550.com-非法私营彩票| www.819393.com-彩票分析软件app| www.2070.vip-彩票开奖免费下载| www.qv66.com-福彩十三五规划| www.12og.com-福彩票单式中奖| www.885.com-象棋彩霸周小平| www.7885.org-用手机上怎么买彩票| www.53199.cc-奇趣分分彩官网平台| www.995347.com-北京体彩在哪兑奖| www.445088.com-咸阳彩票店转让| www.669458.com-施工彩钢围挡定做| www.6730.org-足彩4月赛程安排| www.1985.cc-智慧彩票站-| www.541852.com-亚洲5分彩走势图| www.941179.com-中福快3时时彩| www.088799.com-重庆市彩55期| www.366920.com-山东体彩领奖地点| www.500088.cc-久久彩票提现多久到| www.028329.com-湖北快三开奖记录| www.762075.com-竞彩推单app| www.827090.com-珠江彩-| www.916464.com-甘肃快三奖金是多少| www.993649.com-足彩任九定胆技巧| www.gj58.com-福彩快三中了4万| www.3da.com-仲博是黑彩吗可靠吗| www.83pj.cc-十二生肖彩票软件| www.09309.cc-收到网上买彩票短信| www.69731.com-足彩超级必发指数| www.827477.com-有人知道千禧彩票吗| www.540405.com-51彩票注册-| www.618914.com-明天3d彩票开结果| www.676825.com-彩钢板围挡的价格| www.261045.com-99购彩票官网| www.365823.cc-福彩易点彩票网| www.ew2.com-广西十分彩开奖直播| www.145356.com-今日足彩分析| www.782673.com-双色球杀号百度乐彩| 大玩家彩票www.84499s.com| www.cai179.com-快三开奖结果江西| www.68187.cc-福彩3d走势折线图| www.90899.cc-万达彩票抽奖中心| www.051879.com-彩票合买程序| www.wi55.com-六给彩票香港图片| www.211246.com-5分快3购彩平台| www.581133.com-看彩啦开机号| www.5845.vip-彩票奖票-| www.026323.com-彩票体彩中奖概率|