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.448945.com-彩麒麟怎么越养越红| www.160373.com-北京体彩站点查询| www.259751.com-免费彩票选号器| www.404177.com-用油性彩铅画星空| www.267177.com-彩票投注倍数计算| www.361983.com-雨后彩虹的句子图片| www.449915.com-利用时区差买彩票| www.252054.com-福彩3d中彩网| www.636456.com-彩虹4无人机沙特| www.665353.com-竞彩店宣传图片| www.572813.com-彩票开奖香港结果| www.616444.com-竞彩足球5场4关| www.696657.com-篮彩分析软件| www.789699.com-岩棉彩钢板-| www.879035.com-澳门新莆京分分彩| www.964403.com-500竞彩足球比分| www.cp8337.com-中福彩票一分钟一开| www.092343.com-体彩顶呱刮7| www.254421.com-亚博彩票软件| www.357777.cc-老板给员工发彩票| www.305110.com-快三抓豹子技巧| www.97449.com-抵制天价彩礼| www.91506.com-好彩香烟买不到| www.085976.com-足彩中奖规则和奖金| www.066127.com-私彩网站靠什么赚钱| www.118541.com-快三怎么用胆码计算| www.63385.com-胜负彩19054期| www.948145.com-千亿彩票代理| www.659952.com-临沂彩票分析大师| www.737349.com-紫薇福彩胆码| www.824755.com-网络快三是网赌吗| www.907978.com-七星彩好中吗| www.979648.com-河南快三综合图| www.av23.com-体彩p3-| www.yh84.com-福彩8app骗局| www.30vg.com-彩虹玫瑰花图片大全| www.249896.com-福彩通-| www.579377.com-360在线彩票| www.720938.com-福彩和尾振幅走势图| www.805600.com-福彩三d谜图第二版| www.4228.vip-福彩选号器下架| www.262230.com-福利彩票快三太假| www.522189.com-齐鲁彩票七乐彩玩法| www.gd75.com-娱乐快三开奖| www.483813.com-福彩太湖脑筋急转弯| www.4251.top-彩神计划手机版下载| www.108163.com-彩票开发程序员判刑| www.862685.com-7位数江苏体彩网| www.960193.com-福彩兑奖需要| www.xq9.com-北京快三群拉我| www.y17.xyz-西安福利彩票官网| www.1950.in-临沂福彩中心官网| www.85gv.com-飞彩网投注是真的吗| www.44871.com-京彩彩票-| www.506336.com-智慧彩挂机论坛| www.651188.com-大师水彩花卉图片| www.cp0606.com-彩票外接挂件软件| 彩乐乐www.3005x.com| www.227197.com-河南幸运彩开奖记录| www.066216.com-彩票虚拟投注有效吗| www.66.cn-爱投彩票怎么样| www.781038.com-时时彩网站大全| www.543585.com-易购时时彩手机平台| www.071854.com-中彩票的人自述| www.918270.com-海南七星彩玩法介绍| www.022685.com-快三黑平台怎么赚钱| www.cp101.cc-鬼谷子22彩票| www.xz55.com-韩国彩票怎么买| www.414148.com-m5彩票注册官方网| www.613234.com-彩票程序源码论坛| www.780978.com-彩票在挂-| www.ij44.com-福彩3d密码程序| www.039072.com-投彩网官方网站| www.689948.com-彩票法律法规| www.425631.com-八亿彩国际官网平台| www.787740.com-福建七乐彩开奖结果| www.869803.com-彩管家app下载| www.953106.com-吉林省快三带赢| 3G彩票www.c132.vip| www.490149.com-9b彩票会员登录| www.739041.com-福彩微信群-| www.bw58.com-快彩网官网下载| www.c86.club-百宝彩视怎么注册| www.4365.cm-兰州体彩2等奖| www.323453.com-7k官方彩票网站| www.87879.com-福利三分彩合法吗| www.4wv.cc-双色球彩票纸怎么看| www.866363.com-福彩3d123-| www.665894.com-七星彩万字正版图| www.868418.com-海南七星彩最新图纸| www.690605.com-盈彩彩票app下载| www.901957.com-黑彩代理赚流水| 大玩家彩票www.84499r.com| www.324605.com-福彩假的-| www.fz44.com-买彩票的技巧| www.e88.wang-七乐彩直播现场今天| www.29eo.com-彩色铅笔画风景教程| 500彩票网www.843933.com| www.026935.com-足球彩票玩法介绍| www.57368.com-澳客彩票是否靠谱| www.652745.com-足彩开奖规则| www.30lp.com-优秀色彩头像女| www.87879.com-福利三分彩合法吗| www.ik31.com-中国彩票大奖新闻| www.82ol.com-彩票3d算法公式| www.84411.cc-彩钢房顶图片| www.095710.com-福彩3d的彩吧论坛| www.017275.com-官方彩是骗人的吗| www.111119.cc-褔彩天齐网-| www.61251.cc-105官网彩票下载| www.538630.com-大花猫1彩吧图库| www.9229.win-307彩票心水资料| www.46080.com-安徽省福彩领奖地址| 中国福利彩票www.33588d.com| www.031991.com-彩票号码输入查询| www.982243.com-一期彩票人工计划| www.5162.biz-2019亚洲杯竞彩| www.383631.com-盈利彩官网-| www.541568.com-金多彩王中王| www.662342.com-重庆彩票网中奖查询| www.774300.com-七星彩的中奖等级| www.890289.com-坤彩科技发展前景| www.648556.com-七乐彩137期| www.748618.com-一分赛车彩票技巧| www.834560.com-彩烟烟花-| www.925970.com-哈尔滨彩票中奖故事| www.17nk.com-开私彩票网多少钱| www.28515.cc-快三线上app下载| www.3632.wang-鴻彩彩票-| www.885928.com-彩客网电脑版网页| www.43384.com-派彩每日推荐走势图| www.070771.com-彩票自动售卖机加盟| 万历彩票www.77114h.com| www.691829.com-胜负彩查询-| www.773037.com-快三过滤缩水器| www.843992.com-山东福彩群英会好处| www.907128.com-四川成都快三查询| www.979236.com-好彩混合型-| www.fv2.cc-时时彩最快开奖| www.oi50.com-福彩的几种玩法| 皇都彩票www.qj63.com| www.cai3232.com快三中2个号多少钱| www.336604.cc-最新万豪彩票手机版| www.578807.com-体彩标准店-| www.871464.com-福利彩票三d开机号| www.964020.com-福彩3d跨度照表| www.az82.com-人人彩app-| www.803373.com-易彩完美修复补漆| www.513272.com-中国竞彩app下载| www.567840.com-有几种彩票可以买| www.026393.com-福彩开奖号码查询今| www.010991.com-昨天的福彩开奖号| www.77ce.com-七星彩摇一摇选号机| www.409903.com-哪些彩票网站送彩金| www.563241.com-大发快三最稳投注法| www.636028.com-福利彩票税收| www.719295.com-牛彩首页官方| www.812548.com-福彩3d技巧书| www.885376.com-彩宝app官网| www.953624.com-麒麟彩票兼职可信吗| www.058734.com-tt快三直播走势图| www.120234.cc-手机足彩即时比分| www.653426.com-玖亿彩票官方下载| www.863289.com-大智慧彩票-|