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.97116.cc-网彩pc蛋蛋-| www.263944.com-手机在线购彩可信吗| www.028541.com-彩票攻击软件| www.206560.com-神州彩票可信吗| www.764.bid-赢彩网软件-| www.21316.cc-1305彩票官方网| www.579046.com-游戏彩金是什么意思| www.667480.com-爱乐透彩票官网| www.750918.com-彩票店20万转让| www.89775.com-中彩票离婚要分钱吗| www.090636.com-帮买彩票赚佣金揭秘| www.161319.com-福彩公司-| www.252413.com-全民彩票官网网页版| www.331595.com-3d晚报乐彩网| www.404615.com-水溶彩铅风景画图片| www.87433.com-深圳天天彩票网| www.034787.com-给力高频彩app| www.451462.com-重庆时彩计划网页版| www.020087.com-体彩大乐透吧| www.956433.com-富贵彩是坑人的吗| www.oc4.com-河北快三今天跨度表| www.555501.cc-彩票什么算豹子| www.859761.com-福建彩票网彩民论坛| www.939519.com-网上彩票压大小| 中国福利彩票www.33588a.com| www.my37.com-彩票游戏机-| www.534715.com-吐彩票游戏机| www.151547.com-彩经网杀号定胆图表| www.285763.com-彩票166开奖结果| www.302.cc-买彩票是怎么赔钱的| www.uo38.com-福彩3d走综合版| www.36md.com-彩票宝可靠吗| www.2100.vip-苏宁体彩可以加盟吗| www.311382.com-北京快三基本走势| www.923069.com-手机108彩票软件| 彩票驿站www.2350c.com| www.nn40.com-竞彩数据app| www.24ce.com-足彩总进球数怎么说| www.470373.com-境外博彩支付宝代收| www.037342.com-快三十大秘籍| www.170776.com-吉林快三形态走势图| www.245006.com-四川体彩网-| www.335139.com-网上江苏快三| www.407338.com-彩慧堂美白片| www.192427.com-s快三甘肃快三| www.280088.com-时时彩在线预测器| www.495593.com-苹果博彩软件| www.662819.com-国彩在线是骗局吗| www.21825.cc-1997年彩票大奖| www.95255.cc-彩妆盘哪有卖| www.058846.com-3d福彩开奖时间| www.192798.com-领彩票没带面具被杀| www.259152.com-中国竞彩官网app| www.325005.com-福利彩票三地字谜| www.393613.com-咸阳体彩中心在那| www.136054.com-我要去买彩票| www.a14.net-新浪爱彩怎么样| www.123596.com-燕赵福利彩票首页| www.212362.com-永盛彩票平台| www.365077.com-2015版彩库宝典| www.117002.com-彩票倍数怎么投| www.236066.com-澳客彩票网-| www.324106.com-i北京快三助手下载| www.683457.com-彩票网站维护异常| www.317578.com-竞彩稳赢方法| www.cg88.com-江西福彩快三平台| www.n62.net-买高频彩心得| www.73vu.com-广东快乐十分彩官网| www.625061.com-彩票销售公司| www.947921.com-彩经网双色球推荐| 九州彩票www.6769l.com| www.pq89.com-时时彩500万下载| www.31li.com-小鸡彩虹歌曲| www.505.cn-大发分分彩开奖记录| www.739741.com-中国福利快乐彩05| www.853350.com-北京宋家庄彩票站| www.920291.com-hpc好彩票-| www.989084.com-彩八彩票官方| www.li76.com-中彩票软件官网| www.16yv.com-福彩三d兑奖期限| www.86oa.com-福彩彩票害人| www.433889.com-毕节体育彩票| www.547660.com-大地彩票怎么回事| www.715065.com-五分彩怎么推算的| www.0020.com-上海买彩票一夜暴富| www.09089.com-怎么购彩票-| www.890877.com-关于彩票爱情的句子| www.wi47.com-大发时时彩团队计划| www.77224.cc-105彩票亏了| www.039323.com-爱投彩票关闭| www.126984.com-优彩师app-| www.574668.com-福彩复式结果| www.673758.com-85彩-| www.747361.com-优质彩票平台| www.393363.com-昨天的福彩中奖号码| www.594281.cc-七彩汇下载二维码| www.450356.com-亚博彩票风险| www.531219.com-彩铅手绘星空图片| www.791964.com-成功彩票大厅| www.060036.com-乐彩vip网站| www.282558.com-时时彩五星稳定条件| www.378498.com-时时彩平台大全| www.527.cc-喝彩中华2018| www.7067.com-河南福彩中奖规则| www.25718.com-周杰伦彩虹伴奏下载| www.72604.com-彩29网站-| www.96ux.com-福利彩票兑奖查询| www.239135.com-套彩金刷流水| www.371360.com-河内5分彩下载| www.524628.com-彩123注册送18| www.596904.com-qq赛车彩票官网| www.1314.date-三国精彩打斗片段| www.20760.com-幸运快三预测大小| www.72304.com-永红彩票线路导航| www.091123.com-时时彩长龙经验| www.209232.com-黑彩赌博的案例| www.789251.com-山西足彩5808| www.863636.com-彩彩票开奖票开奖| www.923522.com-利用体育彩票坐庄| www.999702.com-体彩排列五两元网| www.ph5.com-派彩网江苏快三| www.328181.com-福彩太湖-| www.527988.com-重庆时时彩统计软件| www.xk52.com-2006年福彩和值| www.81ta.com-袁泉投票综艺福彩| www.102269.com-时彩贴吧-| www.190105.com-苏州快三今天开奖| www.273505.com-时彩宝典-| www.365696.cc-今天体彩p3中奖号| www.464589.com-看彩票结果-| www.q14.org-河北快三黑红号预测| www.56aq.com-瑞士彩票最高奖金| www.1614.vip-爱玩彩票下载安装| www.130017.com-今日福彩-| www.286377.com-快彩网ap-| www.216851.com-内蒙古快三遗漏号码| www.828044.com-中体彩大乐透走势图| www.916396.com-时时彩全中多少钱| www.979086.com-快三黑客软件下载| www.x25.cn-彩神vll是真的吗| www.877105.com-百胜彩票-| www.fy79.com-英国时时彩开奖网络| www.647922.com-天下彩5334-| www.837577.com-竞彩滚球什么软件| www.890125.com-高倍数彩票-| www.8482.com-体彩店装修图纸| www.pj17.com-吉林省快三遗漏查| www.4kj.cc-天天爱彩票密码找回| www.75go.com-足彩怎么领奖| www.441108.com-新加坡体育彩票| www.512984.com-赛车时时彩app| www.4ih.com-福彩3个亿-| www.64ty.com-天空彩民心水网| www.592752.com-彩票生肖牛是几号| www.964106.com-买彩票圈钱-| www.yw98.com-中彩在线是什么| www.45mt.com-中博彩票平台是什么| www.3440.org-彩票站微信营销| www.739.cm-皇冠彩票投注十年| www.228553.com-河南彩礼超过两万| www.522478.com-我乐时时彩计划软件| www.797959.com-易彩补漆笔怎么样| www.xk38.com-甘肃省福利彩票兑奖| www.73js.com-体彩排列五出的杀号|