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.812908.com-旬邑彩贴剪纸| www.1ni.cc-乐彩字论坛手机版| www.84720.com-福彩3d图总汇| www.229860.com-鸿彩app-| www.7024.biz-属马的与彩票| www.463.xyz-福彩快三破解公式| www.083333.cc-福彩快三哪些省份有| www.310129.com-漯河市体彩中心电话| www.q80.me-广东体彩网11选5| www.81kv.com-3d福彩排例五| www.rv23.com-戒彩吧-| www.153028.com-彩票自动核对软件| www.946864.com-上海彩钢板生产厂家| www.jw97.com-彩票跟投软件| www.057837.com-天津快三开奖走势图| www.378214.com-好彩票幸运彩票软件| www.690502.com-澳客网竞彩票网| www.807152.com-双色球彩票折叠| www.900324.com-购双色球彩票选号| 快彩在线www.2632i.com| www.667815.com-福利彩票造假新闻| www.779048.com-苏州体彩中心官网| www.881324.com-三地彩吧助手走势图| www.968554.com-一分彩单双的技巧| www.hb14.com-彩运8是正规平台吗| www.503527.com-福建省福彩发行中心| www.704509.com-128福彩下载| www.799202.com-多赢彩票手机app| www.878593.cc-99彩票注册平台| www.948493.com-福利彩票刮刮卡| www.997402.com-彩票2元网首页首页| www.fm40.com-10分快三是真的吗| www.099278.com-江苏快三单双速赢法| www.947071.com-福彩高频彩有哪些| www.96pz.cc-投资高频彩流刷流水| www.001034.com-酷彩网是真的吗| www.142400.com-外国时时彩彩票网站| www.746839.com-福彩三d谜语太湖| www.877648.com-彩迷本-| www.362668.com-易赢彩票平台可靠吗| www.70697.com-网易三分彩票走势图| www.7hq.com-铁西彩票店-| www.1013.love-火剪彩票下载安装| www.8272.org-南昌彩民中奖| www.163539.com-买双色球彩票的技巧| www.848883.com-重庆时时彩宝典开奖| www.986678.com-福星福彩预测| www.70xm.com-云南彩易达-| www.4466.net-彩尊安桌版下载| www.883837.com-博瑞彩票网-| www.952343.com-马来3分彩-| 中国福利彩票www.34788c.com| www.30736.com-好看彩票123网址| www.229353.com-梦想彩票app| www.22777.cc-网赌吉林快三| www.296260.com-广西快三3d走势| www.057337.com-发彩网下载安卓版| www.od55.com-体彩终端机在哪买| www.88249.com-吉彩宝官方下载| www.170042.com-快三彩票下载安装| www.369705.com-彩票中五位数有奖吗| www.788789.cc-今日竞彩单场| www.cai0588.com北京快三开奖视频| www.030209.com-新浪体彩开奖直播| www.59929.com-卓易彩票pc版| www.204877.com-浙江福彩-| www.2137.com-我想养七彩山鸡| www.12532.cc-学买彩票-| www.96312.cc-订婚彩礼钱能退多少| www.2027.date-二四六好彩报刊大全| www.77395.com-众乐彩票app| www.189394.com-河北快三术语| www.949223.com-体彩福彩论坛| www.sh43.com-重庆时时彩最稳方案| www.655696.com-彩票单式生成| www.129781.com-澳客网比分直播足彩| www.252132.com-9118精英彩票| www.375991.com-欢乐彩app苹果| www.gv59.com-百盈快三和值走势图| www.93me.com-一寸彩色相片| www.750122.com-爱中彩票网-| www.127070.com-彩铅画人物教程图解| www.231008.com-福利彩票提成| www.904828.com-竞彩足球500网| www.997356.com-爱心彩下载-| www.fp67.com-足彩胜负14场规则| www.zb74.com-体育彩排列五走势图| www.389051.com-大佬彩票靠谱吗| www.204818.com-新浪彩票网双色球| www.356347.com-数学和彩票的关系| www.467446.com-彩票猜冠军玩法| www.033508.com-彩神网址-| www.162897.com-95彩票平台-| www.331420.com-金彩网合法吗| www.13fn.com-苏州e球彩开奖结果| 凤凰彩票www.88266n.com| www.721155.com-一号彩票手机客户端| www.873827.com-上海福采快三开奖号| www.17571.com-505彩票代理| www.20cz.com-江苏体彩19049| www.uo59.com-澳门快三走势| www.22sp.com-166福利彩票| www.33151.cc-3d走势彩宝网| www.458787.com-甘肃体彩爱乐彩| www.561433.com-金手指彩票指南| 博友彩www.698771.com| www.12324.cc-竞彩足球赚钱的多吗| www.015265.com-七星彩长条最新| www.712344.com-腾讯5分彩计划最准| www.905165.com-有没有快三交流群| www.982641.com-共享彩票机-| www.ag56.com-798彩票-| www.330570.com-91彩神是真的| www.500772.com-免冠彩色是什么底| www.627991.com-248彩票网-| www.226556.com-家彩开奖首页| www.96331.com-发福利彩票的意义| www.107016.com-福彩中奖怎么领奖| www.65if.com-6538彩票-| www.784937.com-天福app购彩平台| www.901992.com-快三赚钱么-| www.972386.com-体彩排列三开奖查询| www.lp78.com-搜狗彩票正规吗| www.15ki.com-结婚因为彩礼闹矛盾| www.256.me-福彩体彩-| www.912908.com-彩客网买彩票靠谱吗| www.534.live-彩种分为多少种类| www.7359.cm-668彩网-| www.213635.com-足彩分析师培训| www.62uy.com-晋城福利彩票153| www.1785.vip-白菜彩金网址大全| www.526893.com-竞彩稳胆推荐| www.13171.cc-中国足彩网百家欧赔| www.282291.com-台湾时时彩真不真实| www.115885.com-简单好看彩铅画星空| www.6804.vip-福彩3d解迷网| www.881065.com-福彩流水单-| www.838896.com-上海快三电脑版| www.951483.com-江苏快三漏洞查询| www.318945.com-高频快开彩票规则| www.088915.com-彩神快三-| www.608876.com-彩宝贝彩票下载安装| www.685439.com-福彩蓝精灵21| www.008839.com-彩票采集器修复教程| www.87779.cc-打工仔中彩票| www.93mj.com-英国皇家五分彩| www.861348.com-彩金神龙游戏机| www.f06.net-彩78彩票北京pk| www.379030.com-网上买彩是真的吗| www.588594.com-彩票中一亿要多少税| www.666909.cc-乐彩交流平台| www.731754.com-8k彩票登陆-| www.793410.com-极速赛车彩票官网| www.862143.com-体彩排列三直选遗漏| www.921234.com-云来娱乐彩票| www.967213.com-下载体彩481| 福彩www.86267n.com| www.346555.com-神彩网3d论坛| www.072933.com-凤凰彩票网址是| www.587871.com-正版彩票官方认证| www.747762.com-注册送33彩票游戏| www.885061.com-51彩票苹果版| www.952426.com-口袋彩店-| www.990053.com-彩票缩水的意思|