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天

知道了
百盈PK10 www.758908.com-大乐购彩票注册网址| www.703700.cc-998彩票软件| www.800074.com-现在卓易彩票用不了| www.885035.com-鸿彩怎么下载| www.980714.com-彩票分析软件选号器| www.tb5.cc-福彩三d开奖| www.403873.com-时时彩大底-| www.513756.com-超级快5是什么彩票| www.635730.com-a7彩娱乐下载| www.713576.com-江西福彩网官方网| www.806163.com-江苏体彩前三直选| www.899893.com-1392天天彩票| www.995467.com-足彩冷热指数网| www.ew39.com-彩神靠谱吗-| www.77xx.cc-足彩算不算赌博| www.3962.org-开体彩销售点| www.539016.com-众乐彩怎么样| www.689228.com-专业玩彩网-| www.243654.com-体彩网上购买| www.38668.com-淘彩吧-| www.926269.com-国民彩票app网站| www.993961.com-608cc彩票网| www.ae76.com-新浪手机彩票网| www.908756.com-七星彩卖到几点钟| 500彩票www.51515h.com| www.dj88.com-中福彩票提现不出来| www.24bf.com-福彩987那年出| www.01282.cc-彩运网怎么样| www.764124.cc-彩678怎么下载| www.857009.com-中奖几率最大的彩票| www.952041.com-5分彩开奖走势| 福彩www.2109i.com| www.gt05.com-天天好彩开奖号码| www.zo87.com-赢彩吧app-| www.79806.com-阜阳市有彩票机吗| www.34148.com-p3双彩图谜-| www.831.org-女主播开彩票| www.720270.com-七星彩怎么玩算中奖| www.646089.com-财神分分彩-| www.826038.com-江苏快三qq群骗局| www.593739.com-中国彩票最高奖金| www.65200.com-福彩3d夜间字谜谜| www.892873.com-时时彩二星做号工具| www.qs67.com-千亿彩票骗局| www.sb63.com-体彩e球彩总进球数| www.109356.com-天天彩票论坛丨马会| www.ch41.com-瑞彩祥云app官方| www.996079.com-足彩310合买| www.83su.com-好彩票苹果app| www.151594.com-彩乐汇-| www.278292.com-福利彩票三d| www.01766.com-制作足彩票生成| www.82026.com-福彩好易自助终端| www.007357.com-体育彩票中了奖号码| www.ai95.com-181彩票-| 华亿彩www.cai001.vip| www.096096.cc-官方购彩平台有哪些| www.794104.com-棋牌彩票手机版下载| www.898921.com-下载app送彩金| www.969699.com-福彩高官-| www.gx0.cc-公益福彩app| www.ro71.com-彩票输了-| www.717369.com-安徽铜陵体彩网| www.580717.com-陕西体彩电话| www.696139.com-竞彩足球直播现场| www.750416.com-北京体彩网| www.170.in-彩客网电脑版比分| www.675991.com-深圳彩礼一般多少钱| www.552553.com-福建多金彩走势图| www.691411.com-全球赛事购彩| www.514344.com-重庆时时彩高倍中| www.vj84.com-体彩断组-| www.175253.com-快三代理犯法吗| www.905023.com-826彩票下载安装| 彩客博www.8667v.com| www.0fq.com-金彩网正规合法吗| www.21dg.com-彩6各个版本| www.036740.com-彩票游戏网址有哪些| www.635681.com-合装彩虹糖-| www.092107.com-248彩票网站| www.417866.com-俄罗斯好彩香烟价格| 必发彩票www.760557.com| www.69gr.com-彩票类小说-| www.53689.cc-时时彩庄家追杀你| www.138281.com-3d字谜总汇新彩网| www.786629.com-智投全民福彩| www.252299.com-中彩在线是什么彩种| www.2351.pw-体彩有3d吗-| www.603912.com-3a信誉彩票网| www.1199.tv-香港好彩堂资料大全| www.333999.cc-网上能买体育彩票吗| www.418271.com-龙彩科技有限公司| www.510942.com-刘畊宏彩虹天堂mv| www.862799.com-彩票开奖今天晚上| www.940443.com-大发手游彩票| www.991441.com-够力七星彩奖表论坛| www.oo8.cc-江西多乐彩任四遗漏| www.hh42.com-万能彩票分析器| www.973401.com-彩虹歌-| www.098729.com-电脑彩-| www.970280.com-怎样鼓励彩民买彩票| www.cv19.com-靠谱的私彩平台凤凰| www.0303.tv-网络彩票追杀系统| www.49124.com-941彩票-| www.670513.com-360彩票3d-| www.993867.cc-足彩二串一最牛技巧| www.812304.com-最赚钱的安庆竞彩店| www.898331.com-今晚六会彩开奖结果| www.970869.com-腾讯分分彩开奖号码| www.cai3699.com快三大小技巧| www.373654.com-绿好彩是薄荷烟吗| www.530666.com-一分时时彩规律技巧| www.65288.cc-安装南方双彩网首页| www.3733.site-彩票在线平台登录| www.223186.com-3168彩票网站| www.279667.com-彩神8app下载| www.nd10.com-什么部门管皇都彩票| www.676518.com-l彩票查-| www.876775.com-香港福彩资料| www.958852.com-生日彩票计算器| 鸿运彩票www.hy2733.com| www.72180.com-598彩票注册地址| www.932092.com-七星彩一般去哪买| www.987450.com-尊皇彩票平台| www.kw2.cc-甘肃快三88走势图| www.25yy.cc-彩票777是黑平台| www.0355.net-彩票百位出号码规律| www.057522.com-香港六星彩-| www.142145.com-百万彩票选号器| www.519799.com-百度分分彩-| www.492081.com-广东体彩ⅱ选5| www.0464.cm-新彩票交流群| www.089110.com-彩票开奖排列5| www.049455.com-彩票收益分析数学| www.125330.com-福彩刮刮卡规则| www.245434.com-易彩一分钟快三| www.254621.com-福彩3d字谜画谜| www.747594.com-彩93彩票网站| www.849409.com-时时彩怎么破解| www.911085.com-中国体育彩票走视图| www.95363.com-彩票名片-| www.056139.com-彩票黄金分割应用| www.221264.com-时时彩助手官网下载| www.299277.com-中福彩票官网| www.481221.com-喝彩中华澎恰恰| www.555434.com-c53彩票-| www.21844.com-和彩纺织-| www.55pb.com-云南彩票中奖情况| www.250180.com-中国购彩网下载| www.576246.com-快三输钱怎么要回来| www.666216.com-航天彩虹千股千评| www.722915.com-1688彩吧论坛| www.788989.com-竞彩投注比例官网| www.852900.com-北京市福利彩票官网| www.920368.com-彩神ix快3-| www.989704.com-大同彩票平台怎样| www.xq5.cc-3d彩吧图-| www.91294.com-欧免好彩蓝莓双爆| www.201980.com-贵州省福利彩票网站| www.4mg.com-怎么彩票-| www.19rj.com-达芬奇密码彩票算法| www.231532.com-体彩大乐透专家推荐| www.25202.com-桃花林彩铅画| www.146261.com-5彩票-|