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.057975.com-福建今日快三开奖| www.367631.com-上期体彩中奖记录| www.605608.com-福彩一个礼拜开几次| www.677607.com-重庆体彩大乐透中奖| www.761632.com-甘肃快三变动咨询| www.850508.com-世界杯竞彩投注| www.930624.com-上海一彩-| www.986637.com-体彩合值表-| www.wu8.cc-河南快三111遗漏| www.vn45.com-湖北快三缩水| www.12gi.com-快三开奖时间改变| www.92uu.com-狂三本子彩第三| www.761940.com-极速时时彩可以玩吗| www.605605.cc-家装贴墙用彩膜好吗| www.307216.com-福州体育彩票店转让| www.926329.com-江西体彩官网app| www.671112.com-3d家彩网杀码定胆| www.962604.com-京东彩票网址| www.170718.com-极速快三稳赚| www.370061.com-冠彩网是啥-| www.572108.com-国模雨晴拍的彩票| www.748813.com-玩彩票注册邀请码| www.936613.com-中国福彩自助彩票机| www.ps74.com-三分彩骗局-| www.9135.top-七乐彩最近2000| www.019227.com-县级彩票管理员| www.166103.com-快三计划网站| www.371871.com-体彩今天可能出的好| www.532028.com-九宫四柱测彩| www.655203.com-香港皇牌彩经三中三| www.810460.com-福彩3d七乐彩| www.912428.com-快三彩票大平台| www.731876.com-彩色纸箱图片大全| www.954807.com-彩助手-| www.18uj.com-七乐彩什么时间开奖| www.2548.me-彩金唯美话语| www.611998.com-青岛体彩站转让| www.cai3544.com内蒙古快三开奖预测| www.14gw.com-福彩3d的中奖号码| www.90ai.cc-电竞博彩能玩吗| www.40532.com-分分时时彩票下载| www.37439.com-吉利快三下载| www.092582.com-福建彩票下载| www.688667.com-彩神通四码是真是假| www.8ik.cc-体彩单场预测推荐| www.7951.org-智博彩票下载安装| www.810569.com-彩票开奖昨天结果| www.bm07.com-如意彩票官网| www.472688.com-生肖福利彩票| www.002299.com-七乐彩中奖金额| www.998088.com-国民彩票app登录| www.227185.com-电波表快三秒| www.367544.com-水彩星空绘画| www.880265.com-58天天彩票网| www.7906.me-生肖彩开奖结果查询| www.276442.com-快三全天计划软件| www.135100.com-高频彩追号追死了| www.79110.com-手机彩铃怎么定制| www.099095.com-中彩那天教案| www.414477.com-出新出彩的近义词| www.8yu.com-驿站彩票主页| www.374003.com-福彩三弟必下胆码| www.315117.com-竞彩篮球分析预测| www.4297.biz-那个鑫彩网怎么举报| www.68399.cc-河北爱彩乐-| www.198466.com-彩神大发快三入口| www.99660.cc-中国体育彩票一等奖| www.96353.com-陕西体彩排三| www.388161.com-收福彩体彩开奖结果| www.318116.com-福彩今晚金马| www.532450.com-临沂福彩中心电话| www.11fj.com-彩频相册制作| www.225199.com-彩票店里有快三| www.tc5.cc-玩时彩从来没有输过| www.551833.com-足彩360专家军长| www.pz37.cc-彩1官网-| www.119694.com-快三50该怎么倍投| www.479700.com-福彩3d新手入门| www.52zt.cc-2688彩票平台| www.49655.com-福建福彩7乐彩| www.345942.com-彩票赢家与你同行| www.737658.com-金彩网是正规的吗| www.8247.vip-假彩票打印做假| www.113221.com-三彩女装-| www.739503.com-萬博彩票-| www.411866.com-彩票快速查询方法| www.351238.com-一分快三走势口诀| www.1725.pw-七星彩开奖结买| www.366908.com-中国福彩75期| www.836529.com-利彩彩票下载安装| www.fc98.cc-玩彩怎么玩才能赢钱| www.580755.com-七星彩高手交流纶坛| www.mx66.com-彩报网-| www.050660.com-河南福彩领奖地址| www.369092.com-体彩排例三开奖| www.738903.com-宝马彩-| www.882904.com-80彩票是真的假的| www.30jx.com-彩虹代刷官方授权商| www.42262.com-福彩三地图谜2版| www.51xn.com-德州好彩-| www.467733.com-七星彩售票截止时间| www.984740.com-彩票模拟摇奖机下载| www.fw33.cc-福彩三分快三合法吗| www.642625.com-今日七乐彩开奖结果| www.5279.pw-赛后结果及派彩| www.025092.com-今日福彩开奖结果福| www.410140.com-嘉兴竞彩网点| www.520294.com-3d杀号定胆彩票| www.590796.com-天天乐彩怎么样| www.70348.com-人人中彩票一等奖| www.101845.com-彩票平台租赁| www.263130.com-七乐彩奖池余额多少| www.44jd.com-竞彩5串6多少钱| www.271988.com-彩票快三破解器准吗| 818合彩www.www.1555hc.com| www.17154.com-福彩价格表-| www.180096.com-内蒙福彩-| www.479019.com-足彩让球平提高命中| www.9375.cn-福彩老板是谁| www.215156.com-旭彩美缝剂-| www.686781.com-中彩的那天-| www.a55.org-淘宝彩票下载手机版| www.518019.com-福彩中心主任现任| www.673103.com-七星彩多久不能兑奖| www.770224.com-时时彩要停吗| www.839110.com-篮球竞彩什么软件好| www.904518.com-江苏快三购买网站| www.966596.com-久久发彩票pc| www.w52.cn-长春彩溢和吉康区别| www.996.pw-八位数彩票有哪种| www.78028.cc-北单竞彩官网app| www.084408.com-动物总动员彩票害人| www.53165.cc-福彩排列五开奖直播| www.96113.cc-体彩排列三一定牛| www.132127.com-河南农村彩礼现状| www.170041.com-快三彩票app下载| www.301716.com-南国七星彩论坛社区| www.59455.cc-彩铅手绘花朵| www.70714.com-竞彩足球彩票怎么看| www.6kq.cc-智慧预测彩票| www.752113.com-ok彩票网能玩吗| 体彩网www.3890w.com| www.25398.cc-彩铅画玉兰花教程| www.96859.cc-被冒领的彩票| www.097720.com-最新吉林快三微信群| www.240200.com-彩神1号-| www.11236.cc-手机买足球彩票| www.63657.com-竞彩足球唯彩| www.075756.com-彩32vip-| www.216007.com-七星彩稳赚万能码| www.312890.com-河南福彩好运三| www.666646.cc-彩票书哪个最好用| www.2751.wang-彩票十元倍率什么放| www.10983.com-澳客胜负彩-| www.014451.com-七乐彩杀号秘笈| www.178813.com-体彩浙江6+1| www.353825.com-彩票中奖后被杀| www.562301.com-爱中彩票客服微信| www.707556.com-南充福利彩票中心| www.825663.com-南宁福骰快三正规吗| www.2984.biz-彩票程序晓风系统| www.404619.com-甘肃彩礼-| www.fk54.com-极速快三登录网址| www.ye68.com-大发快三假的|