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天

知道了
9彩注册 www.mm1.cc-八八彩票吉林快三| www.yc77.com-山西体彩11选5| www.16mk.com-周口体彩中心电话| www.186366.com-江苏福彩快3玩法| www.299030.com-彩票开奖查询公告丨| www.9264.cc-五乐彩犯罪吗| www.69450.com-500彩票系统源码| www.250198.com-5000彩票app| www.0120.biz-c168彩票app| www.956004.com-亚洲宝博彩票| www.be26.com-36o彩票开奖结果| www.h78.net-快三杀号软件手机版| www.71sw.com-恒彩88登陆平台| www.9764.vip-3d福彩官方网站| www.60713.com-易购彩票安全不安全| www.789197.com-竞彩足球胜平负| www.l28.cc-两元彩票网大乐透| www.835065.com-好彩爆珠烟焦油量| www.tg48.com-内蒙古快三跨度表| www.492557.com-卖黑彩票-| www.336484.com-彩票提现多久到账| www.467577.com-七星彩与双色球| www.594365.com-甘肃快三历史开奖| www.699603.com-快三交流群什么意思| www.803735.com-高频彩投资套利项目| www.702.tv-体彩七星彩开彩结果| www.9062.vip-大庄家计划彩票平台| www.71767.cc-口袋彩票注册| www.053955.com-为陌生人买彩票| www.365128.cc-彩天堂平台手机登录| www.923036.com-下载人人彩票双色球| www.990006.com-彩票有多少个数字| www.fc50.com-117彩票app-| www.wp02.com-中彩网开奖查询| www.26sm.com-陕西福利彩票扫码| www.163.org-福利彩票领奖程序| www.460067.com-天下好彩手机版| www.450327.com-北京七星彩开奖号码| www.564467.com-福彩3d所有组选| www.775223.com-七星彩能不能中奖| www.874385.com-大同彩票合买app| www.950862.com-上期六台彩开奖特马| 大赢家彩票平台www.292726.com| www.947827.com-泰国彩票开奖号| www.170153.com-上海爱彩乐-| www.gb53.com-88彩票下载-| www.590006.com-快三走势图怎么看啊| www.699998.cc-瑞典2分彩计划| www.038405.com-e彩票-| www.130948.com-云购彩票网站| www.497735.com-牛彩官网下载| www.954034.com-彩票专家预测推荐| www.2947.vip-体育彩票店面图片| www.466153.com-彩票打水套利原理| www.988772.com-快三投注第一网站| www.jc92.com-福利彩票手机客户端| www.95548.cc-福利彩票站门面图| www.661807.com-竞彩比分神单图| www.817139.com-58彩158彩开奖| www.al92.com-福彩青蛙过河一等奖| www.7366.net-我附近的彩票| www.7107.loan-七彩花坊怎么样| www.374119.com-河南彩票大奖得主| www.1485.top-彩博888怎么样| www.965576.com-皇都彩票正规吗| www.cai1855.com10分快三计划| www.889873.com-七乐彩什么时候开售| www.979443.com-快三手机网上买票| www.fl48.com-江苏福利彩票网| www.47ny.com-彩41彩票-| www.178015.com-内蒙古快三预测一号| www.035390.com-彩票遗漏统计与规律| www.707036.com-终于戒掉了时时彩| www.825828.com-彩神vlllapp| www.951988.com-彩票全天计划网站| 聚彩网www.290282.com| www.uu08.com-基诺彩票投注技巧| www.593852.com-竞彩即时比分直| www.699987.com-168彩票下载官方| www.805373.com-七乐彩中奖新的| www.cp5377.com-安徽福彩网-| www.381934.com-彩票挂机软件彩仙阁| www.942319.com-刚力彩芽mv-| 福彩www.26878x.com| www.879833.com-网彩有赚钱的吗| www.956047.com-3d彩票图字谜| 彩票大家乐www.21202k.com| www.54kk.cc-98彩票登录路线| www.355532.com-彩票资金规划| www.ub2.com-123手机彩票网站| www.ri99.com-极速快三有挂吗| www.3wu.com-彩票谁发明的| www.38we.com-彩票邀请码贴吧| www.728.com-竞彩足球怎么提现| www.289698.com-大乐透杀号彩宝贝| www.463875.com-天狼星七星彩预测| www.554387.com-足彩宣传-| www.624919.com-uu彩票安卓版| www.696108.com-36o足彩-| www.774546.com-新三国打斗精彩| www.856398.com-彩票反买是什么意思| www.927438.com-韩国快三助手下载| www.13ng.com-中彩网.com-| www.976.space-七星彩一等奖领奖| www.9669.cn-香港生肖彩论坛| www.64987.com-盈彩国际app| www.034985.com-乐彩网静态版| www.131428.com-河南体彩兑奖地点| www.14ou.com-网络购彩恢复了嘛| www.977349.com-河南省彩礼价格| www.cp7318.com-湖北快三爱彩乐| www.674684.com-三杯体彩福彩| www.719335.com-新彩吧官方免费下载| www.206647.com-时时中彩票官网平台| www.cp769.cc-快三哪个平台最好| www.098206.com-百度开奖彩票| www.262842.com-七星彩玩法开奖日期| www.331940.com-爱彩乐11选5遗漏| www.400437.com-七星彩十大家杀号| www.571708.com-新年讨个好彩头| www.15bu.com-海南7星彩对数表| www.591727.com-香港博彩11码| www.036223.com-玩快乐彩下大注定输| www.lb49.com-冀彩宝官网靠谱吗| www.qe79.com-788彩-| www.954658.com-如何买国外的彩票| www.515607.com-代理推广快三| www.610670.com-郑州竞彩快三查询| www.679350.com-彩经彩票网可靠| www.750480.com-中福快三软件计划| www.583962.com-掌中彩封了吗| www.333781.com-双色球彩票选号规则| www.713162.com-体彩7位数彩票| www.707466.com-本港彩票资讯网| www.796883.com-竞彩强胆推荐| www.867780.com-七星彩最新-| www.919180.com-如何搭建彩票网站| www.976257.com-彩礼钱顺口溜| www.cai0911.com福彩快3骗局| www.gk11.com-体彩大乐透预测汇总| www.317699.com-福彩电子走势| www.791627.com-福彩直播视频| www.867160.com-我查一下福彩开奖| www.926502.com-开个福彩店能挣钱吗| www.fr7.com-彩票聪明玩法| www.625287.com-体彩即开-| www.692666.com-辽宁体彩网十一选五| www.122243.com-彩票作弊码-| www.28236.cc-彩票查询用什么软件| www.037660.com-彩票组合软件下载| www.021044.com-最新七新彩开奖结果| www.72246.com-福利彩票无人售票机| www.052967.com-我在亿彩彩票输了| www.137417.com-五分彩可靠吗| www.829342.com-新乐彩彩票-| www.904136.com-网上彩票怎么做代理| www.965486.com-黑龙江福彩网官网| 中国福利彩票www.33588w.com| www.65.com-滴滴彩票怎么玩| www.880937.com-网络彩票兼职| www.975001.com-彩谍分析234期| www.cai1008.com下载快三助手下载| www.5720.cn-手机买不了彩票| www.676777.cc-临沂彩色折纸|