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.564560.com-竞彩店申请流程| www.688450.com-彩鸿快三官网| www.761714.com-时时彩牛牛开奖查询| www.828768.com-567彩票苹果版| www.900408.com-e乐彩-| www.962227.com-福彩3d跨度字谜| 彩神帝www.368200.com| www.948087.com-眉山福彩网-| 大赢家彩票平台www.577690.com| www.py40.com-彩九下载软件| www.34469.com-快捷彩票官方网站| www.31251.cc-易彩云彩票-| www.954756.com-如何选择彩票号码| www.63ly.com-彩金回收金店要吗| www.331546.com-乐彩赢快3-| www.2017.biz-和彩放题价位区别| www.192075.com-江苏快三彩票技巧| www.330169.com-重庆时时彩五星跨度| www.494986.com-彩漂水和漂白液| www.27ts.com-时时彩追号倍率| www.626920.com-大有彩票账号注册| www.633951.com-七彩线坊-| www.787455.com-所新浪竞彩比分| www.958538.com-我要下载彩99| www.66738.com-离我最近的彩票站点| www.388765.com-所有快三公式| www.628663.com-好彩1基本走势图| www.cx25.com-彩票跨度是什么意思| www.74418.com-体育彩票排列五规则| www.112344.com-98娱乐时时彩平台| www.778097.com-大奖网彩-| www.276603.com-自己的彩之源邀请码| www.11316.cc-胜负彩开奖号码| www.58980.com-福利彩票福彩3d诗| www.008286.com-七乐彩开奖时间结果| www.429870.com-儿童水彩画-| www.1sx.cc-湖北体育彩票app| www.097979.com-体育彩票购彩app| www.715879.com-七星彩怎么包浆赚钱| www.836277.com-顺丰彩票平台怎么样| www.78906.com-福彩各种书籍| www.008583.com-足彩19051推荐| www.313999.com-竞彩二串一稳胆推介| www.37jy.com-足彩猜比分单双| www.923697.com-秒速时时彩官方| www.987595.com-福利彩票全国通兑吗| www.em36.com-福彩3d幸运号| www.827036.com-七星彩犯法吗| www.897736.com-多彩贵州普安县网| www.972446.com-迪丽热巴彩铅真人画| www.cai8528.com福彩快三怎么玩不亏| www.22bo.cc-盛源彩票手机登录版| www.226.tv-北京体彩管网| www.vc06.com-3d彩吧图库怪字| www.38fr.com-乐迷彩票app| www.3652.biz-足球任九购彩| www.9117.in-彩霸王高手资料区| www.542501.com-福彩3c开奖结果| www.775985.com-时时彩哪个玩法稳| www.873394.com-上海快三遗漏查询| www.950456.com-易赢彩票网站| www.696730.com-竞彩网手机app| www.317955.com-彩票恒等式-| www.pt57.com-彩神争霸有效邀请码| www.15lo.com-成都彩票店转让信息| www.813.cm-附近体彩网点| www.293579.com-彩神通手机版| www.638167.com-竞彩站主-| www.dt6.com-十分快三计划| www.751750.com-123+彩票网-| www.wn22.com-体育彩票贴吧| www.92633.com-合肥体彩店在哪里找| www.692672.com-网上小彩票-| www.807804.com-彩票中奖的图片| www.946902.com-全天重庆彩计划万位| www.kv36.com-彩票智能-| www.883208.com-鸿彩邀请码-| www.8re.com-手机时时彩平台搭建| www.5311.net-合肥体育彩票站转让| www.052922.com-买彩票技术-| www.181913.com-安徽快三推荐和预测| www.363007.com-福彩万能四码| www.527544.com-好彩高手资料大全| www.633499.com-属马买彩票中一千万| www.713591.com-福利彩票安卓版下载| www.813640.com-竞彩足球稳赚概率| www.886911.com-网赌高频彩重注都死| www.ff56.com-大赢家5分钟彩票| www.e48.bid-i23彩票-| www.46lc.com-彩票网上代购中奖| www.0472.pw-臻彩唇膏-| www.990414.com-时彩族人工计划| www.rx80.com-中彩网福利中心| www.47fq.com-小白彩票旧版首页| www.2684.mobi-正版资料丨牛蛙彩票| www.13249.com-竞彩支持比例与误差| www.82608.com-福利彩票停售时间| www.081038.com-彩运8优惠大厅| www.139991.com-北京快三有多少期| www.213232.com-彩经网河北快三| www.272108.com-立彩助手下载| www.357187.com-中彩票不领-| www.73911.cc-杭州福彩十二选五| www.092275.com-七星彩走势图带连线| www.93608.com-贵州快三移漏| www.427744.com-山东福彩20选5| www.028792.com-乐彩双色球诗迷论坛| www.tx36.com-甘肃快三助手| www.89wj.com-荷兰博彩公司| www.701823.com-足彩任14开奖| www.230417.com-彩八骗局揭秘| www.161586.com-竞彩足球可以买哪些| www.29uj.com-今天彩票是什么| www.577966.cc-彩票近十期开奖结果| www.729708.com-彩票中奖恶搞图| www.73qp.cc-彩票飞鱼游戏| www.2547.xyz-怎样绘制彩票k线图| www.9161.biz-7乐彩中奖规则图片| www.59251.cc-福彩3d教学-| www.4yl.com-彩票万一中奖了| www.yq38.cc-31选7私彩-| www.595132.com-附近的彩票销售点| www.195231.com-贵州快三跨度| www.38215.com-彩天下合法吗| www.016510.com-官方人人彩票网| www.928832.com-大乐斗彩票怎么玩| www.528305.com-彩霸王1388-| www.649527.com-博应用彩库宝| www.802089.com-云南福彩中心地址| www.yn93.com-体彩扑克3中奖| www.99643.com-北京时时彩五星漏洞| www.136667.com-彩77官方-| www.19133.cc-足球彩票中奖经历| www.28bq.com-双色球体彩几位数| www.8739.love-彩票预测高手| www.471.cn-500500彩票-| www.212116.com-168彩票下载| www.v96.net-福利彩票3d中奖号| www.572339.com-七星彩彩迷-| www.jq96.com-彩神大发快三app| www.060009.com-湖南体彩网论坛首页| www.r87.club-微博世界杯彩票| www.pq66.com-天齐网福彩3d字谜| www.57sr.com-苏快三好中吗| www.1881.hk-分分彩投注-| www.720997.com-超级团队彩票计划| www.0512.red-国正彩票-| www.lx23.com-青海省快三-| www.044366.com-足球彩票推荐软件| www.ud.com-体彩网官方网站| www.505566.cc-广州体彩中心号码| www.753067.com-国家有没有高频彩| www.832266.com-破解彩票伪随机数| www.325299.com-发达娱乐彩票真假| www.933837.com-玩彩票跟计划靠谱吗| www.761419.com-本期体育彩票规律| www.22jc.com-足彩14场中奖晒图| www.6282.vip-五福彩票安卓版本| www.1237.net-彩票豹子多久开奖| www.001485.com-福利彩票位数| www.139311.com-遵义市体彩中心| www.376487.com-福彩3d村胆码| www.582608.com-中彩集团-| www.718635.com-体彩排列五开莫结果|