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.791522.com-京东快三彩票| www.914521.com-瑞彩祥云官方邀请码| www.39330.com-旺彩彩票查询| www.99837.cc-澳彩网登录-| www.444068.com-心脏彩超sv44| www.555545.com-时时彩十一选五| www.628675.com-福建省体彩中心主任| www.739702.com-彩票iphone-| www.f84.live-排三遗漏统计双彩网| www.1599.bid-购彩网gcwcp| www.29593.cc-七乐彩尾数走势图表| www.390312.com-博发彩票999| www.114893.com-5oo万体彩-| www.288957.com-彩票4亿官网| www.397575.com-昆明快三骗人吗| www.539211.com-中彩票破产-| www.610991.com-中彩乐购代理| www.684112.com-体彩竞彩网官网首页| www.781863.com-网络江苏快三黑彩| www.892185.com-彩票榜下载苹果版| www.969327.com-追号买彩票有希望吗| www.tn43.com-安徽快三变化| www.46sz.com-955彩票平台| www.844128.com-中国福利彩票7月| www.85yw.com-竞彩波胆赔率| www.hd69.com-甘肃快三爱采乐| www.581116.com-宝哥胜负彩推荐| www.758908.com-大乐购彩票注册网址| www.891567.com-彩票如何网上推销| www.966109.com-即开型彩票中奖规律| www.bb7.com-彩票投注倍数技巧| www.6093.me-彩票计划手机版官网| www.51228.cc-猜单双的彩票叫什么| www.661243.com-新彩票首页走势图| www.840045.com-f福彩3d-| www.925960.com-福彩旗下是什么东西| www.982028.com-内蒙古快三和跨走势| www.tc9.com-抚州市福利彩票| www.969893.com-福彩主任抓了几个| www.22386.com-彩礼和嫁妆哪个多| www.865352.com-分分彩开奖记录软件| www.982100.com-福彩3d计算神器| www.vu3.com-上海快3彩票查询| www.99318.cc-时时彩遗漏冷热软件| www.639436.com-体彩店区域保护距离| www.251946.com-彩票12正规吗| www.kt51.com-上海福利彩快三跨度| www.185677.com-河北福彩快三开奖号| www.317565.com-彩票查询排列五今天| www.048181.com-贵阳11选五爱彩乐| www.463618.com-利奥彩票平台登陆| www.hu79.com-仙彩足球彩票app| www.788420.com-足彩19042预测| www.564920.com-福彩3d组选统计表| www.375533.com-福建摇骰子彩票活动| www.731419.com-彩钢板围挡生产设备| www.982510.com-优游时时彩平台注册| www.is35.com-体彩手机投注客户端| www.11dx.com-怎样看走势图买彩票| www.658.la-亿元彩票网是黑彩吗| www.08528.com-彩神通电脑版| www.293.cc-哪里买七星彩| www.303188.com-七星彩规律表图纸| www.430399.com-新加坡三分彩网站| www.084323.com-中彩在线时时彩平台| www.794689.cc-网络快三彩票赌博| www.899800.com-彩83平台-| 彩客网www.030310.com| www.914018.com-快三玩法表格图片| www.807912.com-数字彩票预测法| www.885334.com-澳客赢家彩票安卓| www.970315.com-今晚七彩结果| www.ua.cc-大发和彩-| www.ww79.com-南方双彩网主页| www.0943.xyz-彩39下载app| www.86728.cc-鸿彩灯光-| www.905173.com-合肥体彩店转让信息| www.999355.com-好彩自然来近义词| www.049577.com-彩票的推算规律| www.127542.com-彩虹六号新手教学| www.235744.com-齐鲁风采t乐彩| www.468793.com-青海快三app下载| www.8716.vip-123天空彩票| www.442937.com-恢复网络购彩| www.322762.com-如意彩票计划软件| www.mk28.com-正义彩-| www.177760.com-彩票外挂手机版| www.750895.com-中福彩票登陆| www.849360.com-最牛的足彩高手| www.911586.com-5亿彩app下载| www.965164.com-菲律宾博彩被压护照| 金冠彩票www.49956j.com| www.545372.com-易彩彩票怎么看懂| www.637447.com-小米彩虹电量| www.716237.com-快三2倍中奖多少钱| www.791974.com-离我附近福彩店| www.874282.com-彩票本期开奖号码| www.939579.com-福彩网提现不了| www.982022.com-买彩票的技巧3d| www.np42.com-福彩兑奖-| www.13kj.cc-彩智彩票软件| www.96gf.com-创远娱乐彩票| www.010725.com-3d彩票开奖试机号| www.47316.cc-彩礼钱法律规定| www.97115.cc-足彩火柴盒交易量| www.3784.biz-体彩19046期| www.853850.com-云南时时开彩| www.947618.com-在线彩票投注| 幸运彩票www.550806.com| www.io12.com-正规彩票投注平台| www.941185.com-阿里彩票app| 优点彩票www.137103.com| www.hb07.com-购彩大厅手机版| www.76697.cc-新彩网福利彩票3d| www.785147.com-海南7星彩大奖| www.06fy.com-河北浩彩快三| www.197.cm-和善美彩铅画| www.571663.com-正规分分彩平台| www.659849.com-体彩六加一开奖玩法| www.733518.com-福建体彩哪里兑奖| www.803282.com-彩票返奖率-| www.885628.com-鑫鑫彩票网-| www.961846.com-买彩票能发财吗| 幸运彩票www.112070.com| www.it59.com-竞彩比例-| www.4514.win-足球彩票停售时间| www.57382.cc-苹果如何下载立彩| www.290453.com-3d彩经网杀号定胆| www.025472.com-快三判断单双技巧| www.125268.com-福彩快三有模拟器吗| www.462734.com-cb8c0m彩宝票| www.5iq.com-足彩中多少钱要交税| 乐点彩票www.910336.com| www.jg93.com-趣客站网彩是什么| www.398159.com-大奖彩票网上购买| www.62oq.com-彩票组合软件有用吗| www.2174.cm-网上买体彩大乐透| www.67392.com-体彩11选5复式| www.343536.com-大华彩票网-| www.208978.com-江苏快三开奖号预测| www.293859.com-广西快三遗漏三同号| www.376718.com-必赢彩票官网app| www.515618.com-足彩竞彩年赚一千万| www.95cj.com-博彩金手指报纸官网| www.rp17.com-福彩快3有假吗| www.531317.com-桃花彩铅图片大全| www.646686.com-足彩职业彩民| www.715361.com-彩预测计划app| www.557650.com-双色球彩池奖金| www.073062.com-世界彩票中奖最多人| www.718152.com-菜鸟彩票网-| www.988841.com-腾讯分分彩规则| www.sk8.com-上海体彩中心在哪啊| www.685096.com-下载3d彩票-| www.826353.com-悠悠彩票客户端下载| www.909308.com-宝马彩票平台靠谱吗| www.981606.com-福彩主任如何作假| www.ci01.com-彩票网站哪个好| www.87ky.com-彩票代下兼职| www.156376.com-好彩堂网-| www.321007.com-彩票开奖结果排列三| www.291987.com-基诺彩票怎样中奖| www.rs12.com-福彩牛彩网-| www.487900.com-高彩联盟开奖记录|