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天

知道了
亚洲28 www.432137.com-体彩票彩票开奖查询| www.613776.com-体彩排三中奖号| www.597233.com-山西省快三-| www.678265.com-重庆福彩开奖网| www.773701.com-时时彩开奖软件官网| www.867928.com-海南彩票天涯论坛| www.953643.com-马来西亚大万彩票| 天天中彩www.505151.com| www.17ve.com-注册就送99彩金| www.3336.win-西安市体彩中心兑奖| www.954275.com-匕星彩-| 天下彩www.394689.com| www.155363.com-足彩哪种玩法最易中| www.466918.com-足彩开奖公告胜负平| www.639362.com-青海省福彩中心官网| www.795277.com-布衣电子报3d彩报| www.922535.com-红8彩票app-| www.cp9335.com-中彩app下载| www.573.tv-捷豹彩票系统| www.341006.com-体彩大乐透欢迎语| www.526762.com-时时彩投资盈利计划| www.621964.com-688彩票网-| www.716942.com-画彩铅怎么赚钱| www.869004.com-体彩七星彩口诀| www.948346.com-彩霸王中特网论坛| 鑫亿彩www.196051.com| www.323632.com-乐彩彩票app| www.54000.cc-时时彩咋样算| www.021358.com-体育博彩高返水网站| www.122980.com-酷彩吧客户端下载| www.217050.com-省份快三是什么| www.541742.com-完美彩票彩79| www.474255.com-福彩三毛三毛总汇| www.347915.com-福彩3d奖金计算器| www.444897.com-未央福彩转让| www.700779.com-竞彩水位是什么意思| www.791745.com-彩票七乐彩中奖规则| www.875188.com-福彩3d彩舟东全图| www.950682.com-时时彩最佳反倍投法| 彩票控www.7777ho.com| www.737931.com-意大利彩金在澳门| www.860454.com-湖北快三追号计划| www.929923.com-彩牛彩票官网| www.981789.com-钟彩仪-| www.bb68.cc-内蒙古快三推荐号| www.gh92.com-今晚福彩开奖结果| www.2685.pw-时时彩能提现出来| www.9589.vip-彩票趋势软件安卓版| www.22yb.com-福彩几个月过期| 大赢家彩票平台www.937182.com| www.410649.com-体彩怎样算中奖| www.7048.biz-买彩票有什么窍门| www.639464.com-旺彩注册-| www.783353.com-体彩七星彩开奖日期| www.51gt.com-华人彩官方网| www.7202.cm-a7彩票娱乐平台| www.20002.com-福彩十二生肖走势图| www.79363.cc-快三最多买多少倍| www.8329.top-七星彩天涯论坛| www.95283.com-福建体彩有几种玩法| www.118260.com-新手买彩票买什么好| www.875.red-少儿彩铅画作品大全| www.48ag.com-荣誉彩票网-| www.645501.com-七乐彩玩法杀号技巧| www.031815.com-下彩彩票手机安卓版| www.5454.in-彩38备用网址| www.21400.com-乐乐彩神靠谱吗| www.356185.com-分分彩助手-| www.462209.com-彩票规则漏洞| www.55986.com-金彩网下彩天空网| www.91690.com-上海澜赢骗彩票| www.yw72.com-3d彩票技巧和规律| www.918216.com-体育彩票倍率| www.568395.com-掌上京彩打不开| www.635667.com-七彩阳光背面做| www.23255.com-国彩彩票是正规的吗| www.553922.com-快三论剑随州论坛| www.0429.in-彩票作弊器真的假的| www.007654.cc-甘肃体彩中心地址| www.88441.com-英国体彩网站| www.71339.cc-搜狐彩票开奖查询| www.2814.pw-兰州彩票店生意转让| www.275744.com-福利彩8位数的| www.975263.com-腾讯赛车彩票官网| www.245793.com-足彩比分直播360| www.076027.com-达人彩票吧-| www.191670.com-湖北福彩快三奖金| www.qs51.com-福彩中心事业编| www.656565.com-北京福彩一等奖中奖| www.50355.cc-中园体育彩票网| www.004097.com-福彩动物总动员攻略| www.59er.com-竞彩足球推荐微信群| www.1909.vip-南粤福彩34期结果| www.744309.com-凤翔彩票下载| www.4563.pw-体彩大乐35期| www.8993.in-凤凰快彩-| www.53326.cc-菠萝时时彩预测软件| www.646488.com-下载头奖彩票软件| www.738129.com-美女微信诈骗彩票| www.833551.com-c59彩票怎么样| www.954202.com-苹果下载时时彩软件| 发彩www.50732g.com| www.33673.cc-江苏快三宝典app| www.7284.biz-全国彩票销售额| www.151050.com-中彩网手机-| www.230916.com-快乐彩票6348| www.299231.com-爱彩票官网-| www.994392.com-天天购彩票网站大全| www.dh07.com-彩票达人预测| www.vx41.com-时时彩平台出租骗局| www.659347.com-博彩源码哪里可以买| www.730960.com-足彩賠率分析| www.809041.com-老彩民平台怎么样| www.891581.com-洪荒之九彩凤凰| www.965104.com-传统彩的骗局揭秘| www.am95.cc-49彩票下载-| www.sz78.com-5位数的彩票叫啥| www.0251.net-乐盈彩票赚钱吗| www.0245.cc-众乐彩票赢钱容易吗| www.00133.cc-彩票3d专家推荐号| www.75wg.com-5d彩超设备价格| www.996925.com-彩宝网三d-| www.74vj.com-今天福彩杀码号| www.41674.com-重庆福彩手机版| www.21721.com-复式彩票一张多少钱| www.069980.com-贵州体彩票11选5| www.87622.cc-体彩店内部装修图片| www.832479.com-七彩云app官网| www.948782.com-万彩吧专家-| 七星彩票www.091865.com| www.35576.cc-江苏快三的红号| www.88422.com-迅盈彩票-| www.219784.com-众彩网程远预测| www.309788.com-体彩有几种玩法| www.918399.com-谁有好的彩票平台| www.187295.com-网上时时彩是骗局吗| www.736252.com-彩票刷水是啥意思| www.841303.com-怎么拍彩票查中奖| www.921720.com-高频彩职业彩民技巧| www.979094.com-旋子彩画教程| www.zy.com-河北快三走势5跨度| www.077890.com-中国五分彩-| www.220285.com-22彩票网站-| www.141524.com-彩票选号大师客户端| www.026309.com-双色球爱彩人彩票网| www.097767.com-微信群玩快三好多拖| www.231350.com-至尊快三app下载| www.912051.com-威胁黑彩平台报警| www.586758.com-博彩首存1送18| www.661630.com-如何竞猜足彩中奖| www.973146.com-真的彩色玫瑰| www.cai658.cc-福彩快三是什么意思| www.pl45.com-彩乐乐群英会遗漏| www.879672.com-极速彩票骗局| www.954260.com-大红鹰彩票网站| www.cai4678.com江苏快三专家预测号| www.rg48.com-彩名堂计划软件| www.24oj.com-凤凰彩票官方下载| www.1365.com-28彩下载-| www.7283.me-彩虹高尔夫儿歌| www.295111.cc-福彩调整公告| www.377266.com-彩正规澳门彩票平台| www.486132.com-三分彩投注技巧| www.6mo.cc-彩票中的数学理论|