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.560500.com-彩29app官网| www.679986.com-2m2元彩票网| www.763843.com-彩神国际官方| www.839725.com-19048体彩-| www.912328.com-聚华体彩店安全么| www.975869.com-河南驻马店彩礼| www.cp2900.com-福彩快三中奖金额| www.wg78.com-三分快三开奖号码| www.21dw.com-彩票接口商是啥东西| www.99hr.com-彩世界网站-| www.lf33.com-万购彩下载-| www.00ot.com-彩票也疯狂法律| www.00lq.com-描写彩虹的优美语段| www.87qp.cc-手机彩膜是钢化膜吗| www.0933.bid-苏州竞猜快三查询| www.26679.com-如何选中七星彩| www.088549.com-彩票平台检测玩家| www.237842.com-快三推广-| www.372163.com-体彩和值最大遗漏值| www.537615.com-彩色造句子-| www.710981.com-购买足球足球彩票| www.833338.com-有没有彩票店二维码| www.960245.com-淘彩app是骗局吗| www.bs58.com-新快三怎么玩稳赚| www.1qg.cc-刘谦预言彩票| www.526.cn-时时彩龙虎如何玩| www.8578.biz-今天体育彩开什么| www.71879.com-彩票中奖领奖流程| www.047048.com-彩票号码生成器原理| www.93vq.com-彩色艺术照哪年有的| www.93428.com-竞彩大小盘-| www.165882.com-彩票快三赚钱| www.352036.com-竞彩连黑-| www.525106.com-怎么查到彩票| www.653865.com-奔腾彩票登陆| www.789419.com-体育彩票有什么数字| www.98662.com-足彩二串一玩法| www.147259.com-有没有好的购彩平台| www.278954.com-彩票中奖真实经历| www.401444.com-七星彩长居-| www.559661.com-彩票榜邀请码哪里看| www.714040.com-天津3d福利彩票| www.925633.com-彩富网tk236| www.mu2.cc-今天内蒙快三技巧| www.f95.shop-体彩排列三和值表| www.598.win-希腊五分彩开奖结果| www.8547.vip-女子彩票中51亿| www.89726.com-彩票游戏平台免费| www.130536.com-休闲快三套路| www.254579.com-大发快三开奖查询| www.377411.com-彩票代理qq-| www.558555.cc-彩虹在圣经中的意义| www.699155.com-6288彩票官网| www.836583.com-香港牛蛙彩资料大全| www.fd35.com-五分时时彩全天计划| www.14ow.com-网络购彩还没恢复| www.9988.biz-用不了彩娃彩票| www.090089.com-彩票兼职的联系方式| www.235723.com-彩票足球-| www.361200.com-3d报纸彩图版| www.537295.com-彩票类别-| www.717831.com-77彩票网软件下载| www.832759.com-体彩自动选号器| www.cp181.com-分分快三计划app| www.d78.net-彩票开奖123导航| www.402501.com-离婚彩礼返还的标准| www.558506.com-简单唯美彩铅画人物| www.660423.com-彩票刮刮乐透视眼镜| www.805970.com-乐透啦彩票安全吗| www.961457.com-大奖网买彩票犯法吗| www.ej11.com-福利彩票高频彩| www.20cw.com-19027胜负彩| www.14089.com-有人中过彩票上亿吗| www.008583.com-足彩19051推荐| www.170629.com-经典快三开奖| www.29582.cc-彩票7乐彩-| www.016338.com-彩票有k线吗| www.238361.com-河南快三模拟| www.700465.com-竞彩足球兑奖地点| www.273955.com-二分时时彩开奖号码| www.36571.cc-彩票香港-| www.486455.com-足彩实单推荐| www.271931.com-中原彩票首页| www.998164.com-海口七星彩开心网| www.q89.org-湖北快三未开号码| 彩71www.c71.cc| www.019785.com-桐梓彩票店转让| www.149523.com-佰萬彩票邀请码| www.907028.com-国家福利彩票快乐8| www.277365.cc-色彩-| www.505795.com-刮刮乐彩票批发| www.731164.com-今晚足球足彩直播| www.025204.com-浙江福利彩票快乐彩| www.532650.com-福利彩票上海销售点| www.72fv.com-体彩4+1是几等奖| www.035150.com-彩票平台倍数高| www.487533.com-www彩81彩票| www.912562.com-微信美女时时彩骗局| www.845608.com-台湾有几种彩票| www.962270.com-香港快三免费计划| www.57337.com-宝盈彩可靠吗| www.221040.com-彩神彩票是真的吗| www.625487.com-最专业彩票销售平台| www.26466.com-长春彩票站-| www.94ld.com-福彩双色球选几个号| www.379588.com-尼彩手机官方| www.hi73.com-江苏快三所有号码| www.7wx.cc-离婚后彩票中奖算| www.68hp.com-如何确认彩票真假| www.pe72.com-福彩一分钟-| www.557757.com-福彩20分钟-| www.922537.com-招聘外围足彩分析师| www.797762.com-点滨和易彩哪个好| www.tx03.com-彩票屠龙计划客户端| www.488556.com-天天竞彩推荐| www.821278.com-福彩大兵全图| www.76609.com-陈赫买彩票-| www.wc02.com-体彩七星彩专家预测| www.f88.loan-华人彩漂测速版| www.751702.com-世界杯足彩赔率| www.488642.com-今年彩票中奖没人领| www.743488.com-天天中彩网骗人吗| www.47te.com-口袋彩店和口袋号店| www.2381.vip-愚人节彩票中奖骗局| www.342421.com-好彩频道在哪里直播| www.768402.com-电信免费彩铃| www.7065.cm-幸运彩代理-| www.7788.live-竞彩能赚钱吗| www.sa63.cc-时时彩个位杀一码| www.50cd.com-中国足彩在线官网| www.762792.com-8g彩票会员登录| www.733858.com-福利彩票隔奖| www.177798.com-十分快三技巧| www.8530.in-本期足球竞彩奖金| www.963295.com-彩宝网彩票手机版| www.946644.com-高频彩票把我害死了| www.32414.com-北京百姓彩票网站| www.428272.com-买彩票买哪种彩票好| www.274679.com-玩脑者时时彩软件| www.vl57.com-中央教育台直播福彩| www.82ap.com-速8彩票五分彩辅助| www.86965.cc-融彩网是啥-| www.058970.com-竞猜篮彩比分直播| www.187627.com-快乐时时彩开奖结果| www.323384.com-福彩30选七走势图| www.523059.com-五百竞彩即时比分| www.55058.com-福彩3d过滤app| www.126234.com-玩彩票抢红包| www.cai4644.com快三怎么玩赢钱| www.401544.com-手机彩票网co| www.734798.com-线上购彩-| www.1249.cc-五分彩个位计划规律| www.849166.com-买篮球的彩票软件| www.712033.com-足彩十四场分杪| www.756916.com-彩66安卓下载安装| www.672220.com-彩宝大乐透杀号预测| www.789424.com-收米竞彩下载| www.179394.com-快三是赌博吗| www.714449.com-七乐彩除五走势图| www.906351.com-大乐透彩票票面| www.077377.com-高频彩种类-| www.581040.com-买时时彩犯法吗| www.943.cm-体彩排列三直播视频| www.sk43.com-竞彩比分直播吧|