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.379229.com-竞彩分析师兼职文章| www.9578.club-凤彩网福彩3d独胆| www.634332.com-七彩衣坊-| www.888833.com-台湾5分彩开奖号码| www.969229.com-中神彩下载-| www.cai1955.com北京快三开奖直播| www.960149.com-泰安体彩30亿| www.427555.com-易彩国际客服电话| www.441151.com-大发云彩神88| www.6685.cc-快乐彩票的邀请码| www.9588.com-19年体彩新规| www.6971.me-天空彩65-| www.939947.com-123彩票可不可靠| www.886338.com-大发彩票网是私彩吗| www.591815.com-香港马会彩票规则| www.25219.cc-彩铅画有市场吗| www.009284.com-体彩任选二开奖结果| www.32261.com-足彩19038佬牛| www.7308.cm-福彩包括哪些彩种| www.008866.com-投诉彩票店怎么投诉| www.233648.com-分分彩开奖结果查询| www.274787.com-快三研究经验| www.233084.com-新浪足球彩票电脑版| www.553357.com-500万彩票官方| www.092160.com-湖北快三1跨遗漏| www.613018.com-正规的彩票分析团队| www.866019.com-网易彩票怎么停掉了| www.295.tv-七星彩1500期| www.657573.com-彩票网易专家杀号| www.688336.com-3d彩票高手微信| www.04ms.com-彩票开奖杳5| www.555535.cc-七星彩有位置排序| www.543809.com-福彩3d蓝精灵| www.627786.com-双色球彩票讨论区| www.606283.com-国内禁止彩票| www.696710.com-今日足球竞彩赛程| www.775369.com-体彩发行时间| www.848948.com-十分快三规律| www.910598.com-优乐彩app-| www.969583.com-江苏体彩管理中心| 大玩家彩票www.717224.com| www.127749.com-新版彩虹代刷app| www.248102.com-贵州快三时间| www.447227.com-双色球维彩视频土豆| www.623600.com-汇晨彩票-| www.702260.com-明彩彩票-| www.791446.com-千禧彩票备用| www.895645.com-四场进球彩推荐| www.330070.com-中国足球彩票新浪网| www.029890.com-彩经网3d绝杀六尾| www.v58.xyz-大乐透彩票开将| www.67be.com-360彩票软件下载| www.452132.com-幸运中彩票助手软件| www.583224.com-彩色复印多少钱一张| www.660013.com-彩票计划防连挂技巧| www.22726.com-河北快三走路| www.594880.com-三彩羽绒服女装| www.730738.com-麒麟彩票下载| www.953125.com-中国足球竞猜竞彩网| www.316038.com-上海体彩销售点| www.r60.cn-快钱彩票有人赢钱吗| www.218301.com-分分快三下载链接| www.260350.com-彩票怎么选-| www.400300.com-福利彩票摇号模拟器| www.021131.com-体育彩票玩儿法| www.350075.com-彩色饺子机-| www.453953.com-酷彩吧苹果下载| www.qo99.com-吉林快三开奖视频网| www.4766.biz-彩友会是黑平台吗| www.5317.online桌易彩票下载| www.956330.com-彩票之家兔费料大全| www.525916.com-世界杯买彩票规则| www.002211.com-苏州彩票店转让58| 中国福利彩票www.33588q.com| www.ee77.com-彩票怎么无损刷流水| www.v52.com-今天3d彩民乐图片| www.5553.pw-uc彩票网可靠吗| www.844000.cc-足彩博彩哪里买| www.035256.com-彩票广告语大全集| www.009595.com-235彩票平台网址| www.867833.com-彩69兼职是骗局吗| www.952476.com-彩票验奖app| 500万彩票www.35155l.com| www.837782.cc-网上彩票下载安装| www.788188.cc-足彩那个app靠谱| www.d00.tv-360七星彩走势图| www.zo29.com-彩票最新新闻| www.42aw.com-足彩胜负平14场| www.0637.org-三分快三技巧顺口溜| www.01796.com-戒博彩图片-| www.578566.com-体彩门店图片| www.049909.com-炫乐彩票吧-| www.651170.com-星空抽象画水彩| www.778505.com-下载升级版网易彩票| www.893086.com-时时彩在线做号软件| www.982342.com-四川体彩网开奖查询| www.gl45.com-四川体彩网站| www.397185.com-福利彩票双色球计算| www.880115.com-喜乐彩票怎么玩| www.5690.vip-吉林省时时彩走势图| www.970094.com-今天的七彩奖是什么| www.sf20.com-网赌分分彩忠告| www.346880.com-李彩谭在线-| www.129443.com-福彩三胆高手| www.6792.cn-百度吉林快三| www.679530.com-戒掉彩票的办法| www.950537.com-乐彩客官方下载苹果| www.12al.com-彩色的翅膀的作者是| www.751175.com-彩票巴士注册推广码| www.325092.com-彩票吧吧-| www.14387.com-极速快三是官方彩吗| www.136208.com-足彩过滤软件手机版| www.280211.com-重庆时时彩已关闭| www.835866.com-西宁福彩中心在哪儿| www.962666.com-江苏福彩中心地址| www.sg22.cc-五分彩在线计划网赚| www.802652.com-北京福彩兑奖大厅| www.565216.com-3d预测万彩吧| www.699978.com-五百彩票网的股票| www.9151.cc-洛神体彩店下載| www.133365.cc-彩钢瓦围墙效果图| www.262649.com-琓彩人杀一码| www.cq02.com-个人买私彩坐牢吗| www.422888.cc-荣誉彩票犯法吗| www.018718.com-竞彩虚拟足球走势| www.515641.com-彩票稳定盈利模式| www.055073.com-有彩色复印吗| www.800228.com-大乐透彩票500| www.983643.com-北京快三一天开几期| www.35dh.com-南海彩票社区| www.956157.com-速盈彩平台-| www.cai5277.com吉林快三质合走势图| www.922300.com-彩票365ios-| www.017.date-福彩三d试机号多少| www.533533.cc-彩排列三走势图| www.690822.com-彩票网投平台黑钱| www.795755.com-新加坡天天彩资讯綱| www.870890.com-41彩票网下载| www.961924.com-彩票分析大师手机版| 大赢家彩票平台www.927670.com| www.jz02.com-c168彩票正版| www.670106.com-福彩三d今日谜语| www.083400.com-时时彩惨痛的经历| www.635166.com-博彩游戏骗局| www.301680.com-体彩字迷汇总| www.165867.com-福利彩票中奖案例| www.3778.xyz-体彩七星彩那天开奖| www.831321.com-神马六给彩2019| www.53796.cc-福利彩票排列5开奖| www.q86.top-七彩星奖开奖结果| www.912.cm-快3彩票中奖巫术| www.685618.com-799彩票官方网站| www.755028.com-手机一定牛买彩票| www.806356.com-361理财彩票| www.05095.com-彩金怎么换黄金| www.57585.cc-ag彩票骗人吗| www.95737.cc-体彩比福彩靠谱| www.051766.com-三分快三是什么软件| www.131849.com-河南西平彩礼多少| www.227627.com-福利彩票一分钟一期| www.122365.com-找重庆时时彩微信群| www.108806.com-富贵彩票犯法吗| www.912575.com-5a彩票网靠谱么| www.if1.cc-褔利彩票开奖号码|