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.067039.com-福彩3d智能杀号| www.6465.org-博彩新手推广| www.896013.com-内苎古快三势图| www.0937.win-app彩掌柜-| www.16848.cc-3d牛彩藏机图总汇| www.26277.cc-排列五游戏规则福彩| www.004542.com-竞彩足球加盟下载| www.73vy.com-用彩铅画荷花教程| www.399209.com-南京众彩物流| www.502079.com-体育彩票如何看直播| www.zr16.com-足彩胜负平全选| www.639394.com-中国体育彩票设备| www.377953.com-彩虹6号腾讯手游| www.663006.com-新时代彩票正规吗| www.920161.com-彩票网平台开发| www.yr73.com-足彩中奖助手| www.84166.cc-足彩14中9多少钱| www.0137.vip-彩色的含义-| www.862385.com-七乐彩预测专家分析| www.329255.com-福彩今天的开奖号| www.473337.com-极速时时彩一期计划| www.252122.com-旺彩大乐透预测软件| www.663339.com-双彩票开奖结果| www.750099.com-彩票app软件大全| www.983119.com-上海快三开结果| www.223248.com-快三挂机软件| www.961416.com-七乐彩胆拖投注表| www.cai34.com-新快三网站-| www.903265.com-赢彩彩网764| www.xt73.com-中彩票挥霍-| www.022728.com-高频彩票预测网站| www.12ek.com-吉林快三改时间了| www.151609.com-xy978幸运彩票| www.335660.com-彩票33平台-| www.134666.com-福福彩开奖结果| www.219960.com-体育彩票e球彩| www.308286.com-体育彩票买法| www.407997.com-体育彩票有节假日吗| www.567179.com-旺彩3d网官网下载| www.809405.com-955彩票ios-| www.897099.com-乐彩赢主页| www.963564.com-被彩票托骗了| www.ex1.com-中国福彩快三玩法| www.65cl.com-双色球经典说彩| www.087225.com-福彩今晚开什么| www.239158.com-刷彩是什么东西| www.921197.com-3d彩票算法教程| www.996875.com-7星彩机手机摇一注| www.tf94.com-重庆时时彩全国门店| www.8po.cc-时时彩asp源码| www.254573.com-好彩投网赌-| www.355332.com-福彩3d老北京字谜| www.qy07.com-快三前三组中奖规律| www.879325.com-江西快三选号技巧| www.58815.cc-好彩票app官网| www.130986.com-河南开封彩礼新规定| www.482567.com-支付宝扫码兑彩票| www.772920.com-白菜彩金论坛网| www.906130.com-大连体彩店出租合作| www.1120.com-运城老张体彩推荐| www.972441.com-彩铅萌图-| www.945868.com-彩九c9com下载| www.ib84.com-安徽福彩中心官网| www.48562.com-竞彩足球有哪些软件| www.214314.com-中国彩票大奖排名| www.766914.com-彩界精英双色球成绩| www.858286.com-乐购彩票好不好用| www.922211.com-365彩票怎么安装| www.985609.com-安微快三爱乐彩| www.jv8.com-幸运彩二-| 福彩www.15355b.com| www.130973.com-出台彩礼标准| www.535564.com-福彩几点可以兑奖| www.427259.com-足彩优化计算器| www.254165.com-彩宝网3d遗漏统计| www.360934.com-怎么戒掉时时彩| www.468882.com-r8国际彩票假的吗| www.865831.com-凤凰私彩平台| www.22965.cc-王者彩票闲聊| www.199133.com-滴滴彩票提现不了| www.268025.com-3d彩票分析方法| www.336648.com-今年的彩票是多少| www.210597.com-十分快三助手下载| www.322582.com-博彩app哪个正规| www.99231.cc-内蒙古彩票三地| www.112570.com-吉林快三交流群| www.951741.com-竞彩8串1最高奖金| 500彩票www.640477.com| www.ny55.com-甘肃快三杀号技巧| www.231860.com-彩票开奖查询开奖| www.331900.com-鸿运彩票网官方地址| www.414119.com-挂彩粤语-| www.680004.com-找一下江苏快三| www.781924.com-彩票软件源码排行榜| www.933745.com-快彩是国家官网吗| www.807107.com-体彩纸-| www.885756.com-大众彩票app下载| www.967316.com-福彩双色球选号| www.no17.com-竞彩计算器500| www.104948.com-牛蛙彩票准-| www.271871.com-百宝彩湖北快3| www.gi36.com-福彩快3官方平台| www.212949.com-私彩上下分-| www.514865.com-网上买七星彩怎么买| www.640462.com-新浪爱彩是否合法| www.790603.com-福彩三d彩吧论坛| www.915578.com-玩彩红人独胆| 16彩票www.331616.com| www.958747.com-网络彩票赌博报警| www.875250.com-大发快三是合法的| www.sm27.com-彩之家平台是真的吗| www.if79.com-微信转账拍照打彩票| www.d26.club-彩票开吗直播| www.55nw.com-时事彩能赚钱吗| www.657184.com-福彩3d太湖走势图| www.717611.com-初学者买什么彩铅| www.790654.com-买11选5黑彩破产| www.855562.com-福彩3d众彩专家| www.918823.com-亚洲慱彩app| www.972894.com-迪士尼彩票为人类| www.cai05.cc-快三玩法-| www.ht25.com-江苏体育彩票七位数| www.wm46.com-彩123彩票-| www.175592.com-快三预测软件免费| www.245144.com-易彩网彩票大厅| www.02qs.com-中国彩票第一弃奖| www.242460.com-41c四亿彩-| www.gf35.cc-稻建福彩快三走势图| www.747410.com-乐优彩票提现| www.193783.com-山东体彩快乐扑克3| www.61528.com-胜彩票-| www.324269.com-海南七星彩论坛头尾| www.437722.com-小财神彩票-| www.077578.com-今天七星彩奖表图| www.66444.cc-淘彩娱乐平台可靠吗| www.kx22.cc-快三辅助免费下载| www.19890.cc-体彩283投资计划| www.553550.com-武汉快三直选开奖| www.697790.com-彩库宝典图库| www.804269.com-世界杯体彩在哪里| www.900166.com-3号彩票送彩金| www.337639.com-彩灯制作方法图解| www.483080.com-金彩老年手机| www.587807.com-休彩排例5-| www.975452.com-于都彩礼-| www.cs00.com-搜索159彩票| www.209358.com-宁夏11选五爱乐彩| www.56343.com-快三奖励-| www.974127.com-双色球江苏彩民中奖| PK彩票www.www.23040.com| www.446820.com-彩票店微信群被封号| www.534198.com-七星彩选号计算公式| www.586905.com-足球彩票一般多少钱| www.652172.com-体彩大乐透开奖日期| www.711719.com-足彩波胆比分技巧| www.775669.com-中堂彩今晚开什么| www.839193.com-彩70彩票怎么样| www.893201.com-彩票筛选app| www.947879.com-南国彩票论坛规律| www.982753.com-567彩票安卓| www.ar57.com-信誉老私彩平台| www.399565.com-彩票平台代理加盟| www.540756.com-418彩票下载| www.633822.com-七彩国际美容院退款|