QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > swiper仿华为云官网banner图片轮播代码

原创商用 swiper仿华为云官网banner图片轮播代码

jQuery基于swiper制作华为云官网大气响应式的banner图片幻灯片轮播切换和产品列表布局代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" href="statics/css/swiper.css" />
<link rel="stylesheet" href="statics/css/animate.min.css" />
<link rel="stylesheet" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.10.1.min.js"></script>
<script src="statics/js/swiper.min.js"></script>
<script src="statics/js/swiper.animate1.0.2.min.js"></script>

3、body引入HTML代码

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide slide1">
		</div>
		<div class="swiper-slide slide2">
			<div class="inner">
				<img src="statics/images/words2.png" class="ani img1" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
			</div>
		</div>
		<div class="swiper-slide slide3">
		</div>
		<div class="swiper-slide slide4">
			<div class="inner">
				<div class="banner-text ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
					<h3><em>[ 限时免费 ]</em></h3>
					<h2>专属云<em>0元试用</em></h2>
					<p>专家团1V1量身定制,打造您的云上专属头等舱</p>
					<span class="btn-primary" href="javascript:">免费申请</span>
				</div>
				<img src="statics/images/image-main4-r.png" / class="ani img1" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
				<img src="statics/images/image-sub4-r2.png" / class="ani img2" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
			</div>
		</div>
		<div class="swiper-slide slide5">
			<div class="inner">
				<div class="banner-text ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
					<h3><em>[ 限时免费 ]</em></h3>
					<h2>专属云<em>0元试用</em></h2>
					<p>专家团1V1量身定制,打造您的云上专属头等舱</p>
					<span class="btn-primary" href="javascript:">免费申请</span>
				</div>
				<img src="statics/images/image-main5-r.png" / class="ani img1" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
				<img src="statics/images/image-sub5-r2.png" / class="ani img2" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
			</div>
		</div>
	</div>
	<div class="pagination"></div>
	<div class="cover"></div>

	<div class="home-events">
		<div class="home-events-box" style="min-height:30px;">

			<div class="home-events-box-wrapper" style="min-height:30px;">

				<div class="home-events-box-item">
					<a href="#" target="_blank">
						<i>
				<img src="statics/images/events-icon6.png" alt="免费体验专区">
				<img src="statics/images/events-icon6-active.png" alt="免费体验专区">
			</i>
						<h2>免费体验专区</h2>
						<p class="js-title" title="">热门云产品0元试用</p>
					</a>
				</div>

				<div class="home-events-box-item">
					<a href="#" target="_blank">
						<i>
				<img src="statics/images/events-icon1.png" alt="特惠专区">
				<img src="statics/images/events-icon1-active.png" alt="特惠专区">
			</i>
						<h2>特惠专区</h2>
						<p class="js-title" title="">云服务器首购5折</p>
					</a>
				</div>

				<div class="home-events-box-item">
					<a href="#" target="_blank">
						<i>
				<img src="statics/images/events-icon2.png" alt="严选商城">
				<img src="statics/images/events-icon2-active.png" alt="严选商城">
			</i>
						<h2>严选商城</h2>
						<p class="js-title" title="">精品应用 一键获取</p>
					</a>
				</div>

				<div class="home-events-box-item">
					<a href="#" target="_blank">
						<i>
				<img src="statics/images/events-icon9.png" alt="5分钟快速入门">
				<img src="statics/images/events-icon9-active.png" alt="5分钟快速入门">
			</i>
						<h2>5分钟快速入门</h2>
						<p class="js-title" title="">轻松上手华为云服务</p>
					</a>
				</div>

			</div>

		</div>
	</div>

</div>


<script>
	var mySwiper = new Swiper('.swiper-container', {
		pagination: '.pagination',
		paginationClickable: true,
		autoplay: 5000,
		speed: 1,
		loop:true,

		onInit: function(swiper) { 
			swiperAnimateCache(swiper); //隐藏动画元素 
			swiperAnimate(swiper); //初始化完成开始动画
		},
		onSlideChangeEnd: function(swiper) {
			swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
		}
	})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
旺彩彩票 www.369406.com-彩友网时时彩积分| www.237789.com-时时彩助手下载| www.337599.com-福彩查询号码| www.853976.com-嘉兴体彩公开征招| www.977834.com-彩印纸箱生产设备| www.en87.com-民彩网-| www.yy77.com-乐彩01app-| www.560397.com-糖果派对中彩金图片| www.801857.com-长城彩票下载安装| www.962508.com-福彩双色球兑奖方式| www.08ao.com-七星彩txt书包网| www.542284.com-360彩票原始版| www.v49.net-沧州体彩网-| www.2933.cm-濮阳体彩中心电话| www.388430.com-高频彩票的漏洞| www.8197.wang-澳彩客户端下载| www.020501.com-贵州彩票中奖智| www.231555.com-幸运中彩票下载| www.340212.com-网上哪里买时时彩| www.566366.com-中彩网首页擂台赛| www.693593.com-双色球福彩网易彩票| www.857189.com-网络彩票骗局菲律宾| www.949427.com-福彩何首乌字谜| www.0532.org-买彩票真的能中奖吗| www.76nt.com-黑龙江省福彩彩票| www.384284.com-福利彩票八个字标语| www.614557.com-双色球彩票胆拖| www.825380.com-快三倍投必输| www.944062.com-微微彩票是正规的吗| www.vu43.com-体彩排列3玩法介绍| www.9043.cn-天道篮球竞彩推荐| www.88857.com-腾讯三分彩计划| www.947986.com-四川省体育彩票兑奖| www.ig35.com-体彩136-| www.6453.vip-速8彩票app-| www.79004.com-8g881彩票-| www.689073.com-山东福利彩票开奖| www.847009.com-澳门足彩必发交易量| www.997553.com-乐都彩票app登录| www.yb13.com-足彩app停售| www.455.cc-财神彩票在线| www.931562.com-山东福彩兑奖地址| www.100010.com-广东省体彩中心电话| www.228772.com-快三宝典app| www.346062.com-彩票店怎么盈利的| www.459638.com-竞彩单关历史开奖| www.fe2.cc-高频彩为什么赢不了| www.050460.com-购彩360彩票网| www.3688.vip-a3彩色复印机报价| www.48ks.com-爱心彩-| www.0555.vip-体彩周报-| www.586377.com-下载送28彩金| www.686332.com-时时彩三期必中计划| www.830123.com-福利彩票3d幸运号| www.897875.com-七星彩开奖计录| 中国福利彩票www.34788z.com| www.hw38.com-新快三怎么出豹子| www.003103.com-好彩客电脑版登录| www.965985.com-福彩3d黑圣手图谜| www.cai775.cc-快三技巧规律| www.50ac.com-彩格旭-| www.4773.cc-求信誉好的彩票平台| www.802833.com-好盈彩票聊天室| www.968049.com-中央巡视彩票| www.sx85.com-七乐彩规则-| www.312388.com-鑫彩网买彩票安全吗| www.72575.cc-c彩票-| www.525708.com-福彩3d双胆-| www.739455.com-华彩彩票网站| www.639774.com-彩票牛牛玩法介绍| www.830660.com-易彩票手机版下载| www.79366.cc-快三可以打多少倍| www.068857.com-福利快三彩票| www.351156.com-冠军彩票网-| www.04893.com-彩61是真的吗| www.710173.com-有没有套彩金类似的| www.820063.com-乡镇彩票店-| www.919504.com-彩票网搭建-| www.ia54.com-彩票中怎么弄容错| www.169553.com-延边体彩网-| www.318490.com-福彩排列3奖金| www.431112.com-凤凰微彩手机注册| www.562379.com-千美彩票-| www.663461.com-七位数彩票开奖结果| www.19er.com-彩仙阁软件app| www.1226.win-神彩网合法吗| www.936097.com-老时时彩千位走势图| www.987221.com-全民福彩下载| www.kw3.cc-广西快三走势形态图| www.py28.com-掌上七天彩-| www.x15.com-学生玩彩票输了几千| www.45ij.com-体育彩票店分几种| www.780397.com-彩铅画风景小清新| www.52wf.com-时时彩追号技巧| www.038039.com-彩牛彩票网安全吗| www.163497.com-中国福彩快三是什么| www.02vn.com-彩虹之家同性| www.017551.com-彩票投资指南报今期| www.658985.com-青蛙论坛青蛙彩票| www.794163.com-晚上赌彩票可靠吗| www.873952.com-福彩3d网上能买吗| www.5424.xyz-用彩铅画星空图片| www.064077.com-篮球彩票规则8串1| www.150972.com-c1818乐彩骗局| www.983417.com-彩16官方首页| www.246722.com-山东快三走势| www.ok34.com-怎样用手机买福彩| www.200459.com-河南快三遗漏号表| www.914943.com-重庆时时彩五星| 福彩天下www.807835.com| www.7268.cm-彩虹六号隐藏技能| www.294944.com-3d彩吧图库吧| www.444208.com-最棒的彩票分析软件| www.563604.com-q彩网网页登录界面| www.755090.com-大发时时采彩技巧| www.839677.com-百彩网免费资料大全| www.cai0266.com官方彩票app| www.810999.com-九州彩票代打骗局| www.925255.com-快三多单双预测分析| www.998264.com-广州福彩网官网| www.ro59.com-彩钢围挡使用期| www.665824.com-福佳彩网站-| www.70fx.com-红菜苔彩票提不了现| www.2589.cm-彩票数字拾取算法| www.412320.com-成都岩棉彩钢板| www.nq88.com-内蒙古体育彩票| www.104886.com-彩票追号什么意思| www.176103.com-易彩快三大小技巧| www.629741.com-七彩平台-| www.08199.com-哪里的彩票销售系统| www.830820.com-能打彩票的娱乐平台| www.929632.com-七星彩计算机公式| www.977082.com-彩妆店加盟哪家好| www.ph5.cc-d9彩票app-| www.37385.cc-棋牌游戏免费送彩金| www.3470.cc-足彩310胜负彩| www.98cs.com-乐点彩app-| www.701565.com-手机玩彩票靠谱吗| www.794040.com-公务员彩票-| www.um50.com-合肥福彩中心地址| www.ld06.com-酷彩吧安全吗| www.81955.com-中发彩票是黑平台吗| www.050229.com-黑彩骗局-| www.432388.com-两块钱怎么买彩票| www.540381.com-体彩大乐人透| www.626756.com-本期管家婆彩图库| www.749277.com-七彩网络-| www.828817.com-聚福彩票app下载| www.949217.com-3d彩票预测论坛| www.cp401.com-大发快三平台网址| www.7632.xyz-体育彩票柜台| www.230293.com-北京快三最晚几点| www.664742.com-七乐彩今晚开奖金额| www.838405.com-大发快三一天多少期| www.986403.com-什么是基诺型彩票| www.73qp.cc-彩票飞鱼游戏| www.912304.com-彩票走势图分析制作| www.994363.com-重庆时时彩的诀窍| www.yc3.cc-彩神ⅱ下载-| www.wn77.com-下彩网客户端下载| www.14ab.com-福利彩票160| www.66qe.com-49彩票时时彩| www.735797.com-彩票分析师考试| www.93317.cc-七彩开奖号码是|