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.wv32.com-湖北快三豹子推荐号| www.821252.com-广西快三停售| www.935162.com-快乐彩官方网| www.26xy.com-福彩201902-| www.0241.cm-欢乐时时彩开奖| www.004861.com-福彩33期开奖号码| www.5336.com-qq彩色字体代码| www.17333.cc-淘宝彩票怎么买| www.353265.com-彩素女装官方旗舰店| www.662630.com-竞彩看盘技巧| www.473655.com-福彩论坛网址| www.568587.com-微彩之家推荐号码| www.906379.com-捕鱼送彩金-| 500彩票www.50074g.com| www.rt94.com-大奖彩票注册送38| www.461896.com-福彩开奖排五玩法| www.565070.com-鸿彩快三下载安装| www.663374.com-248彩票数字彩购| www.740850.com-蓝精灵彩报图| www.836067.com-顺丰彩票软件靠谱吗| www.909226.com-宝马彩票网-| www.986159.com-滴滴彩票送28苹果| www.ah69.com-七星彩图纸-| www.659524.com-福彩3d彩民开机号| www.820912.com-哪有彩色水泥卖| www.75qx.com-古建筑彩绘图集| www.029883.com-福彩三地开奖走势图| www.53757.com-彩民了阳光-| www.5102.org-今天买彩票选啥号好| www.93xv.com-希腊3分彩-| www.6600.net-信彩彩票网站| www.011409.com-3d彩票采摘首页| www.102571.com-马来3分彩开奖网站| www.186559.com-江苏快三开奖纟结果| www.57uo.com-500万开奖彩票| www.057274.com-福利彩报-| www.588254.com-迷彩免app-| www.004538.com-老九乐购彩票下载| www.69620.com-九九集团彩票下载| www.001766.com-彩票可以投注平台| www.065795.com-彩虹吉他谱周杰伦| www.8565.vip-七星彩缩水过滤工具| www.ex08.com-快三万能倍投计算器| 博通彩票www.694050.com| www.165991.com-旺彩预测3d4码| www.739588.com-福彩搞笑宣传语| www.vs3.com-华人官方彩票登陆| www.9ex.cc-关于彩票的说说| www.8837.vip-福彩快三注册邀请码| www.16071.com-3d乐彩网论坛| www.x06.cn-香港五分彩全天计划| www.692967.com-南京体彩福彩销售点| www.882353.com-福建彩票网站| www.8632.wang-数字三彩神通手机版| www.679987.com-二元彩票网站| www.4399.name-北京福彩开奖| www.118436.com-彩七七靠谱吗| www.1680.me-百姓彩坛高手| www.866284.com-国家体育彩票电脑版| www.364650.com-印象彩票app| www.540050.com-96彩票苹果-| www.661187.com-cp128彩票-| www.811098.com-新浪彩票预测专家| www.985592.com-竞彩足球对阵表让球| www.wp06.com-下一个体彩排列三| www.482.bid-中国福利彩票申请书| www.990085.com-彩票88网站下载| www.26nb.com-快三破解版下载| www.35837.com-头条彩票app| www.226923.com-最快的彩票开奖源| www.335658.com-体育彩票5d走势图| www.770327.com-港版绿好彩在哪里买| www.865723.com-御彩轩计划软件下载| www.966854.com-彩票兑奖规则介绍| www.ia1.cc-快三骗局-| www.vd06.com-体彩泳坛夺金走势图| www.9839.cm-古建筑彩绘颜料配料| www.06dc.com-彩铅配色表-| www.257013.com-分分彩口诀-| www.445255.com-体彩排例五-| www.517891.com-a23彩票-| www.682499.com-足彩购彩软件| www.806557.com-足球竞彩推荐app| www.cp262.com-吉林快三开奖号码| www.522238.com-五分彩网址-| www.657071.com-七星彩质合数走势图| www.jw60.com-彩库宝典官方下载| www.323292.com-篮彩竞猜-| www.458238.com-买啥彩票中奖率高| www.142977.com-彩8com-| www.004821.com-优彩网彩票-| www.13sr.com-体彩大乐透在线选号| www.003607.com-福利彩票3d字谜图| www.439935.com-老时时彩500万| www.86nf.com-乐彩彩网论坛| www.07244.com-彩票限号一般会开吗| www.713759.com-福利彩票尺寸大小| www.367244.com-彩票最大的奖| www.86623.com-竞彩猫靠谱吗| www.827671.com-大家都不要买彩票了| www.906837.com-美国彩票有几种类型| www.an37.com-贵阳体彩中心| www.23ir.com-代玩彩票账号| www.676576.com-福利彩票销量排行| www.176879.com-1分快三是官方的吗| www.mo45.com-七星彩的中奖标准| www.688328.com-手机短信买彩票| www.808520.com-足彩最新对阵表推荐| www.894922.com-购彩8888体彩| www.959647.com-彩票208-| www.xz46.com-jxc68吉祥彩票| www.32eq.com-星期六有什么彩票| www.787718.com-万彩动画大师| www.848778.com-彩票微信-| www.3172.cc-体彩任九场中奖规则| www.721669.com-破译彩票软件| www.ip99.com-购买足球彩票的软件| www.590971.com-澳门博彩体育彩票| www.121438.com-探探彩票男-| www.610611.com-3d福彩八码复式| www.522947.com-亚投福彩网-| www.256277.com-福彩快3网上购买| www.970727.com-平台彩票漏洞破解| www.299682.com-广西福彩3d-| www.x39.cn-南洋五合和彩开奖| www.733556.com-免费领取彩金网站| www.831767.com-80彩软件-| www.885049.com-cp彩票安卓版官网| www.947742.com-彩票作弊案-| www.985580.com-福彩开奖分析预测| www.qn8.com-吉林省体彩领奖地点| www.tr52.com-万彩网网赚是真的吗| www.209674.com-江苏快三有官网吗| www.100314.com-百宝彩陕西11选五| www.803573.com-兼职彩票群跟买彩票| www.986418.com-tktkcc彩票-| www.ku.com-宁夏银川快三| www.jt34.com-彩吧首页-| www.380101.com-七乐彩2等奖是多少| www.532410.com-方星彩-| www.1943.cc-网络代打彩票分红| www.814589.com-河北省福利彩票招聘| www.919153.com-靠谱的彩票平台制作| www.973214.com-彩虹app自助下载| 600万彩票www.718322.com| www.310432.com-吉林省福彩官方网站| 大赢家彩票平台www.710650.com| www.ni66.com-彩票定位胆技巧| www.x61.org-彩票预测ai-| www.38jw.com-彩陶传奇-| www.069.date-82彩票官网-| www.2939.me-体彩福彩门头招牌| www.203256.com-安徽彩票快3下载| www.64085.com-2018彩礼排行| www.947481.com-福彩3d在线缩水| www.zk6.cc-5d彩票开奖结果| www.zd98.com-热门的彩票app| www.533.biz-全新腾讯5分彩| www.cp290.com-河北快三开奖号码| www.093899.com-时彩开奖-| www.187377.com-福彩快三专家分折| www.890904.com-福彩3d组三单式| www.2994.com-福彩三地十期开机号| www.31td.com-生肖快乐彩票|