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.8523.loan-香港668彩票下载| www.771677.com-如何申请87彩店| www.954525.com-奔驰彩票计划网| www.423704.com-无双大蛇3星彩| www.698128.com-极速时时彩技巧稳赚| www.xf30.com-彩票天下23cc| www.084100.com-彩票托照片哪里的| www.853453.com-优游彩票ub8登录| www.964382.com-139彩票网网页| www.js80.cc-荷兰五分彩走势图| www.595614.com-尼彩手机怎么样| www.147231.com-手机网投彩票| www.596871.com-3分快三平台| www.669447.com-体彩胆是什么意思| www.755050.com-一分钟一期彩票玩法| www.855914.com-吉祥彩票网-| www.957034.com-7k彩票网-| 天天彩票www.106036.com| www.865159.com-福利彩票不是骗局| www.959104.com-世界彩票中奖排行榜| www.fa42.com-带计划的彩票app| www.zs93.com-彩35网站-| www.83799.cc-苹果买彩票软件| www.708158.com-体彩官网手机客户端| www.973402.com-网上买彩票是套路| www.bv77.com-河北快三开奖今天号| www.691853.com-足彩胜负彩澳客网| www.781815.com-中彩票人八字| www.885494.com-七星彩机选很难中奖| www.956143.com-速盈彩票平台怎么样| 易彩堂www.55885g.com| www.la72.com-02彩票app下载| www.10123.com-微彩娱乐平台app| www.890114.com-快三长龙最长多少期| www.968542.com-北京五亿彩app| PK彩票www.845040.com| www.22339.cc-彩礼万紫千红一片绿| www.891545.com-梦想彩票站首页| www.kc64.com-彩票倍投计算| www.190771.com-快三输了怎么上岸| www.385822.com-中国3d彩票-| www.13271.com-中国竞彩360首页| www.456500.com-乐博彩票正规吗| www.557399.com-采摘牛彩网字谜| www.981973.com-彩尊娱乐平台登陆| www.ns6.com-甘肃时时彩开奖结果| www.pm29.com-湖北快三一定牛走图| www.6th.cc-宁波体彩中心电话| www.60ay.com-竟彩足球比分直播| www.0005.in-什么彩票是七位数| www.4845.xyz-太原市体彩中心电话| www.9799.wang-七星彩多长时间过期| www.132120.com-宿州彩礼-| www.ah71.com-七星彩走势图30期| www.yq95.com-浙江福彩网官方首页| www.41wr.com-杭州彩色透水地坪| www.695.hk-竞彩购买技巧分享| www.4841.vip-创富彩票怎么玩| www.513751.com-彩钢觉围挡-| www.497658.com-中彩网杀号-| www.395231.com-昨天福彩开什么| www.5000.tv-网上骗买彩票行为| www.99739.cc-全中国彩票平台大全| www.171145.com-河北省快三遗漏| www.950181.com-非法经营彩票罪量刑| www.894932.com-时时彩助手-| www.012014.com-黑彩有哪些平台| www.109386.com-金利彩票骗局视频| www.5549.vip-足彩18035期| www.45512.com-微彩吧兼职先充40| www.1847.press-大发快三最稳投注法| www.122455.com-代玩彩票人的微信号| www.23988.com-彩票双色球怎么买| www.9229.top-乐彩网正规不| www.60688.com-体彩彩票站怎么申请| www.208993.com-体福彩最新开奖结果| www.93cf.com-幸运彩跑马投注技巧| www.418466.com-中博彩票赚钱吗| www.568338.cc-微彩论坛排列五| www.666239.com-e乐彩可以赌吗| www.785327.com-彩票字谜总汇大全| www.881123.com-大乐透彩票幸运选号| www.cp430.com-江西快三出奖结果| www.pu07.com-933彩票平台| www.06kn.com-黑彩多大金额会判刑| www.546.live-福彩鬼六神算子字谜| www.3827.in-体彩第19025期| www.839171.com-天天彩票推荐| www.961105.com-4ggy香港天下彩| www.rw8.cc-河南跑马彩-| www.951199.com-本期足彩对阵表| www.45662.com-福利彩票农场方法| www.484392.com-全中彩-| www.128993.com-520彩票下截| www.034321.com-nbn258竞彩-| www.78538.com-大乐透乐彩-| www.83.cc-22彩票提现不到账| www.92227.com-好彩一技巧-| www.230819.com-彩运8是黑平台吗| www.701089.com-淘宝彩票电脑版入口| www.j84.xyz-3d彩票正版藏机图| www.455651.com-易网彩票网开奖| www.557016.com-28彩票网-| www.623670.com-聚财网买彩票| www.715333.com-彩票全天计划网址| www.332073.com-鸿运彩票网是否合法| www.108666.com-体育彩票应用| www.210489.com-吉林快三黑彩案例| www.7711.cm-湖北彩前三值| www.303061.com-七星彩连线走势图表| www.x47.xyz-盈彩票-| www.18.link-三亚抓私彩-| www.964.me-福利彩票六加一开奖| www.iw41.com-万博官方彩票| www.622258.com-看彩吧-| www.67.vip-福彩3d试机号下载| www.95ld.com-叮叮彩店二维码| www.5388.me-777彩票靠谱吗| www.v75.me-彩报第二版图| www.587223.com-篮彩怎么买外围| www.68126.cc-高手彩-| www.339158.com-北京时时彩彩票平台| www.981421.com-竞彩足球九场开奖| www.96126.cc-体彩排三专预测| www.14843.com-福彩报纸电话| www.772194.com-时时彩后三组六平刷| www.850078.com-时时彩号码计算工具| www.919157.com-新强时彩三星走势图| www.978918.com-36选7好彩1走势| www.hv0.com-快三屠龙与砍龙| www.006470.com-大发快三主赢软件| www.954046.com-中国竞彩联盟| 爱购彩票www.453552.com| www.4380.vip-01彩票东坡下载| www.654963.com-霞光异彩是什么意思| www.766006.com-彩之源平台下载| www.863397.com-乐彩客app-| www.927075.com-中彩堂正版的资料| www.981564.com-老梁彩票双色球| www.tb67.com-时时彩三星技巧| www.07ou.com-花间美人古风彩铅画| www.0680.cm-申请开办福利彩票| www.282358.com-彩票实时开奖| www.645957.com-买足球竞彩血本无归| www.58qp.com-体彩竞彩足球群| www.6668.org-赌彩票骗局视频| www.000406.com-太原体彩11选五| www.077056.com-福清诞生彩票巨奖| www.xf60.com-广东南粤风彩好彩三| www.238759.com-七天彩票官网网址| www.44599.com-福彩6加1走势坉| www.100552.com-易赢彩票官网| 博友彩www.267by.com| www.714238.com-国彩是什么-| www.798501.com-鼎盛冠军五分彩| www.865361.com-澳客竞彩网-| www.922649.com-彩票软件大全苹果| www.974672.com-中华彩下载-| www.04yc.com-福彩36期开奖结果| www.642172.com-时时采彩宝典安卓版| www.477077.com-湖北福彩三d开奖号| www.0452.loan-申请彩金是什么意思| www.116302.com-彩虹周杰伦2008| www.220269.com-大彩网手机版|