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天

知道了
1分快三 www.331365.cc-贵州福彩快app| www.851248.com-腾讯分分彩是正规吗| www.977738.com-彩色混凝土压模地面| www.kv54.com-代玩彩票兼职qq群| www.8376.cn-旺角彩皇丶资料大全| www.85015.com-彩圣双胆-| www.540039.com-杨艺的休闲快三| www.648067.com-著名的博彩公司| www.80615.com-腾讯彩票网首页| www.703899.com-幸运彩票号码选号| www.794822.com-足彩是赌博吗| www.29913.cc-杏彩平台测速| www.ap89.com-贵州体彩app| www.66353.cc-彩票正版藏机图今日| www.638372.com-附近哪有体彩销售点| www.787677.com-排三绝杀六码彩经网| www.880811.com-淘宝买彩票合法吗| 爱彩www.005ac.com| www.548173.com-梦兆册七星彩号码查| 大赢家彩票网www.54400b.com| www.980551.com-附近福彩店有哪些| www.143711.com-彩788cc入口| www.080948.com-历年7星彩开奖号码| www.178489.cc-福利彩票3d走势图| www.79xs.cc-百盛娱乐彩票有托吗| www.05070.com-致富彩是不是骗局| www.0182.cn-深圳国彩-| www.6833.in-3d彩报全报-| www.39832.cc-彩运8下载网址| www.312303.com-福彩快乐三开奖结果| www.380771.com-幸运飞盘彩票| www.53lk.com-体育彩票怎么购买| www.cp311.cc-甘肃快三一定牛开奖| www.850539.com-时时彩方法研究| www.026040.com-手机淘宝网买彩票| www.213057.com-彩神通今日推荐| www.553040.com-福彩3d高手论坛| www.667743.com-彩票1千本金| www.758289.com-代理福利彩票赚钱吗| www.873663.com-彩3-| www.951834.com-菲律宾彩天下合法吗| 500彩票网www.65707y.com| www.lx03.com-好彩票安卓-| www.366344.com-国产彩电排名| www.636851.com-彩虹六号下载| www.723632.com-体彩大乐透亿元大奖| www.802758.com-彩票在手机上能买吗| www.878731.com-江西赣州福利彩票| www.962075.com-大彩网抢红包| 吉彩www.318021.com| www.rf70.com-168彩票安卓| www.265468.com-新昌双彩乡下塘村| www.44ub.com-何为黑彩-| www.794478.com-竞彩稳赢概率| www.zo87.com-赢彩吧app-| www.609081.com-彩票游戏源码| www.112845.com-足球竟彩网计算器| www.410453.com-足彩盘口水位看胜负| www.579014.com-瓜州彩票中奖| www.669362.com-福建福彩中心在哪里| www.758617.com-电玩挣钱软件送彩金| www.854254.com-福彩旗下的高频彩| www.rs3.com-快三投注群-| www.582748.com-体彩屋生成邀请码| www.786022.com-大赢家时时彩app| www.891166.cc-红彩会555-| www.981914.com-买大发快三违法吗| www.cg11.com-360彩票购彩大厅| www.9ia.com-体彩七位数中六位| www.95aj.com-什么是多彩投众筹| www.8010.vip-南京彩票兑奖地址| www.44461.cc-创富彩票可靠| www.62216.com-跑马彩票3分钟| www.378909.com-潢川福利彩票| www.501819.com-易彩国际马来西亚| www.388522.com-迷彩虎军事游戏| www.624127.com-彩神争vii-| www.al71.com-贵州体彩7位数| www.63jv.com-彩金项链能卖多少钱| www.321530.com-彩票中奖组选| www.06bf.com-彩票中奖技巧指南| www.95nw.com-多彩投坑人-| www.2982.cc-彩票网购官方| www.uh95.com-全民彩票合法| www.318804.com-南昌体彩兑奖中心| www.29890.cc-财神彩票真的假的| www.062247.com-福彩双色球领奖期限| www.9701.com-彩店宝彩票客服| www.56651.cc-体育彩票平台| www.77442.cc-2019竞彩规则| www.099419.com-今日体彩中奖号| www.817139.com-58彩158彩开奖| www.922044.com-湖北快三贴吧| www.993131.com-彩票摊主怎么赚钱| www.kb3.cc-江苏一定牛快三| www.pp44.com-17500乐彩-| www.998799.com-中国体育彩票三等奖| www.bb90.com-安徽快三万能走势图| www.g66.net-彩宝店app下载| www.576308.com-轩彩娱乐-| www.1133.cn-竞彩足球腰斩怎么算| www.257516.com-甘肃福彩官网| www.387180.com-尼彩手机大全| www.436549.com-山西竞彩5800万| www.f71.club-马来西亚网上博彩| www.056533.com-网上哪个平台买彩票| www.63199.com-今日竞彩初盘| www.030860.com-c彩61是骗局吗| www.025555.cc-优彩网快3-| www.799979.cc-新手怎么买足球彩票| www.612459.com-安装彩计划-| www.ci22.com-极速快三是官方彩票| www.zx29.com-彩虹软冰淇淋机| www.356927.com-体彩门头标准图片| www.127319.com-彩铅森系鹿-| www.037673.com-买彩票输钱能报警吗| www.222426.com-快三赚钱是不是骗局| www.219407.com-福彩6+1走势图| www.466592.com-香港a23彩票网| www.629732.com-彩票65期开奖号码| www.18872.cc-998彩票网站大全| www.025068.com-幸运pc彩票平台| www.14ez.com-彩金神龙连线版下载| www.278.vip-免费加盟店彩妆| www.343238.com-乐彩网三d玄机图| www.108541.com-全部彩票下载安装| www.008.la-至尊彩平台违法吗| www.6018.biz-3d彩票攻略-| www.841126.com-体育彩票有哪些种类| www.me15.com-福彩快三倍投方案| www.66285.cc-重庆老彩走势图| www.35577.cc-快三黑号红号有哪些| www.96932.cc-有哪些足彩推单| www.069563.cc-743彩票-| www.06086.cc-最棒的彩票销售软件| www.392785.com-延吉体育彩票| www.844734.com-胜负彩18083期| www.382070.com-点击精彩内容一起色| www.278899.com-快三定胆奖多少钱| www.506193.com-广西快三计划网站| www.769252.com-彩票刷负盈利| www.987755.com-关停的彩票客户端| www.q05.net-福利彩票中心开机号| www.2zb.com-头条彩票是真的吗| www.6404.cm-彩48平台-| www.029993.com-福彩刮刮乐微信兑奖| www.kj9.cc-安徽快三下载免费| 亿彩堂www.87668a.com| www.920135.com-百万彩票是骗局吗| www.028724.com-盛彩-| www.131049.com-安阳内黄县彩礼| www.382036.com-精彩点击-| www.t72.biz-777福彩社区| www.800880.com-就业时报3d天天彩| www.112402.com-体彩排列三出奖号码| www.306535.com-d9彩票d9com| www.927823.com-派彩每日推荐下载| www.73593.com-海南七星彩书籍专区| www.07yy.cc-彩铅素描苹果教程| www.48796.com-竞彩无脑买-| www.bk.cc-安徽省福利彩票快三| www.32qo.com-我想福利彩票| www.128175.com-快3彩票是正规的吗| www.13211.cc-竞彩反倍投-|