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.100143.com-8炫彩福利彩票| www.538047.com-国彩体彩-| www.626.tv-58福彩下载-| www.681188.com-想做七星彩代理| www.815130.com-双色球搜狐彩票网| www.940342.com-内蒙快三杀号定胆| 网易彩票www.506232.com| www.nm98.com-足彩竞彩推荐| www.3198.com-彩票123网站大前| www.073713.com-体彩p3杀码家彩网| www.34923.com-彩计划1011| www.3001.club-网彩平台制作安装| www.11827.cc-积分换彩票-| www.63100.com-彩票手机版哪个最好| www.021342.com-七乐彩走势图带线| www.5mm.cc-竞彩比分交税吗| www.8336.cm-七乐彩复试中奖查询| www.110159.com-爱彩乐彩票数据提醒| www.248626.com-大发彩票手机版| www.ty50.com-彩票高手怎样买彩票| www.ev95.com-福彩快三中奖软件| www.3056.biz-雅彩彩票下载| www.127448.com-好运来彩票诈骗| www.18kv.com-彩彩大咖是什么意思| www.571206.com-好运彩彩票官方网站| www.282863.com-彩票33安卓版| www.78255.cc-荆州快三开奖| www.i30.top-彩投彩票网-| www.51507.com-福彩4d选4玩法| www.681029.com-爱米彩app-| www.551.in-pp彩票官网-| www.rg67.com-彩票专家赵公明| www.4484.net-体彩第19022期| www.259782.com-甘肃体彩助手在哪里| www.009500.com-网上黑彩报警有用吗| www.211218.com-福利彩票快3好中吗| www.268813.com-哈尔滨逸彩快三| www.517338.com-国外高频彩票| www.782392.com-tt彩票网人工计划| www.885186.com-神州行彩票网站| www.xu14.com-335彩票下载| www.87bb.cc-会员登陆百胜彩票| www.068666.com-玩江苏快三赚钱| www.123849.com-启航导师赚钱彩票| www.0638.org-彩票推算最准的系统| www.03494.com-台湾彩券539| www.810482.com-彩票店新规定| www.90183.com-体彩和值遗漏值表| www.mn25.com-七乐彩怎么算中奖| www.02qz.com-世界杯彩票怎样投注| www.8240.vip-互娱彩票下载abb| www.148886.com-蜀州通和小米彩票| www.086617.com-上海彩票机器人代理| www.899459.com-彩神通会员4码软件| www.997462.com-赢发彩票怎么邀请码| www.hq34.com-今日新彩网首页| www.196008.com-爱彩乐彩票手机版| www.130375.com-七星彩前四位算法| www.823011.com-深圳福彩兑奖app| www.863058.com-肥城彩票中3亿| www.633630.com-建盏七彩光图片| www.790086.com-体育彩票选号工具| www.868868.com-大乐购时时彩| www.134871.com-龙彩绘-| www.259782.com-甘肃体彩助手在哪里| www.352424.com-网上彩票账号解封| www.221011.com-大发时时彩玩法技巧| www.004995.com-彩票開獎結果| www.155350.com-足彩有几种购买方式| www.155143.com-传统足彩任九怎么玩| www.237216.com-时时彩计划群里的托| www.117004.com-七星彩奖金规则| www.wl73.cc-爱彩彩票app下载| www.98837.cc-足彩任选9-| www.ny2.com-甘肃体彩-| www.038850.com-彩票助赢网页版| www.298256.com-七星彩今晚开奖视频| www.449963.com-彩金高反水-| www.527886.com-微彩娱乐是骗局揭秘| www.603215.com-中国足球竞彩比分直| www.674811.com-国家要取缔快开彩票| www.763667.com-分析足彩的app| www.824431.com-福利彩票单式选4| www.893112.com-福彩3d之家彩吧| www.970726.com-彩票没中奖安慰句子| 大赢家彩票平台www.502990.com| www.127780.com-歌词一点彩虹| www.568362.com-福彩断组预测| www.961869.com-三彩服饰官网| 彩票500万www.207109.com| www.076007.com-福利彩票最大的数字| www.0659.cm-香港5分彩稳定计划| www.32xm.com-体育彩票利润| www.727345.com-易彩集团首页| www.350768.com-福利彩票双色球奖励| www.468218.com-彩票山西尤师真的吗| www.552533.com-彩票自动出票系统| www.950185.com-重庆百乐彩-| 爱米彩www.am7654.com| www.456442.com-七乐彩官网-| www.581108.com-彩票趋势是什么| www.963124.com-彩钢板房-| www.3276.biz-体彩顶呱呱中奖图片| www.02544.cc-新浪彩票网站下截| www.312920.com-乐彩双色球诗谜| www.3988.mobi-不给彩礼的男方父母| www.99167.cc-时时彩qq投注| www.390280.com-彩8对战彩票| www.511327.com-豪亨博彩票新网站| www.591139.com-东北人结婚彩礼多少| www.764405.com-505彩票注册彩金| www.904365.com-彩神v软件是诈骗吗| www.962304.com-百度体育彩票| www.fx8.cc-赢彩彩票网站| www.mx46.com-旺彩3d官方下载| www.go39.com-安阳彩礼-| www.500847.com-彩色胶卷哪年发明| www.576229.com-开心彩票网可靠吗| www.660927.com-永利彩世界-| www.435118.com-丰大彩票是真的吗| www.fj48.com-福彩快三买大小单双| www.411034.com-唯彩会彩票网下载| www.532250.com-福彩申请条件最新| www.579265.com-幸运彩票邀请码| www.675839.com-三b彩票中奖号| www.za13.cc-甘肃快三预测软件| www.69133.cc-体彩福彩哪个挣钱多| www.076190.com-彩票达人三五个尾巴| www.164425.com-彩票新闻故事| www.2xe.com-时时彩平台信誉好| www.779796.com-600万彩票网| www.882395.com-江苏快三开奖奖金| www.949550.com-浙江快乐彩定位遗漏| www.995407.com-易彩票app合法吗| www.zb28.cc-福彩3d好心人布衣| www.702285.com-盛澳竞彩合法吗| www.71ra.com-恒彩登录地址| www.61341.com-叮叮彩票-| www.275689.com-彩运8下载-| www.853643.com-天津市时时彩| www.35075.com-金彩网快三技巧| www.137678.com-体育彩票直播在线| www.293372.com-智慧彩票app下载| www.407720.com-今日七星彩走势图| www.092726.com-商丘彩礼钱-| www.196977.com-好123彩票走势图| www.278258.com-惠民乐彩票是真是假| www.025086.com-易彩线路测速中心| www.dh77.com-七星彩规则及玩法| www.4qu.com-买彩票都是什么人| www.71ce.com-百胜快三好不好考| www.fr08.com-江苏快三奖金多少| www.yd55.com-好彩网是骗人的么| www.181829.com-彩票河北快三走势图| www.24447.com-彩铅星空的画法| www.387097.com-好彩彩票投注| www.575433.com-时时彩票软件大全| www.47qv.com-广西体彩大乐透巨奖| www.062649.com-鸿运彩下载-| www.973025.com-彩宝贝网免费预测| www.ig05.com-中国快三投注技巧| www.59bn.com-探探里的彩票拖| www.76ow.com-福彩几个中奖| www.0602.org-500彩票有规律吗|