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.236875.com-足彩今日稳胆| www.380756.com-云南彩票案-| www.538009.com-颜色的彩色-| www.639302.com-彩票店彩票安卓| www.739773.com-3d彩涂今天-| www.823987.com-开彩票店投资多钱| www.905172.com-合肥体彩店能转让吗| www.976288.com-郑州本地彩礼| www.le65.com-河北冀彩宝下载安装| www.m16.com-彩票官网下载手机版| www.53nw.com-体育彩票全4个多钱| www.0555.date-玩彩人杀一码| www.02466.cc-至尊彩下载到手机| www.61786.cc-特区彩票七星彩| www.026865.com-足球竞彩34彩票| www.111543.com-盈彩网址-| www.188988.cc-内蒙古体彩兑奖流程| www.271522.com-好彩3中两个多少钱| www.397045.com-体彩怪字神图谜今天| www.529895.com-重庆时时彩计划小鹿| www.626965.com-双彩网张维新| www.708456.com-杭州体育彩票网址| www.793183.com-斯诺克博彩在哪里买| www.876422.com-彩票网三地预测总汇| www.983547.com-pk彩票-| www.xj4.com-哪里有微信的快三群| www.tr70.com-彩票api接口大全| www.11ml.com-奥门48彩-| www.92oe.com-体彩有哪几种彩票| www.3369.cc-彩经网杀号定胆精准| www.9473.top-彩票12平台黑钱| www.82338.com-江苏快三计划员| www.044254.com-彩票一天赢三百收手| www.148760.com-幸运8彩票游戏平台| www.243473.com-体彩排列七走势图| www.326256.com-彩500彩票-| www.404447.com-广西彩礼多少| www.517200.com-体彩晚上几点停售| www.598536.com-深圳彩票软件开发| www.678265.com-重庆福彩开奖网| www.762243.com-3d福彩字谜大全| www.965755.com-8号彩票论坛注册| www.cai2999.com北京福彩快三开奖号| www.mk43.com-一定牛吉林快三预测| www.7zc.com-老公买彩票欠债| www.71oe.com-穷人买彩票打油诗| www.1525.com-福彩3d定胆图| www.9896.wang-快彩网怎么样| www.56483.cc-福彩公益金管理办法| www.006443.com-河北快三号码| www.077151.com-彩店宝店主版| www.145378.com-足彩推荐最准的专家| www.274910.com-时时彩官方网站公告| www.365971.cc-彩铅品牌-| www.467777.com-jz彩票-| www.557267.com-水彩画简单-| www.629183.com-万彩吧彩票3d| www.702424.com-还能买竞彩的app| www.782751.com-51彩店靠谱吗| www.864756.com-798彩票开奖记录| www.935010.com-体彩机器连接电视| www.991302.com-金彩网彩富网高手网| www.da6.com-老时时彩走势图| www.qx96.com-彩票预测神器破解| www.13ar.com-8亿彩新版下载| www.84wr.com-分分彩五分彩| www.2318.in-快三彩票在线| www.8213.cc-玖富彩票怎么下载| www.31499.cc-玩彩技巧-| www.82718.cc-足彩胜负19024| www.036772.com-重庆时时彩过滤器| www.188957.com-vip彩票网-| www.261214.com-竞彩任意9场奖金| www.356192.com-彩票中的数学理论| www.466584.com-彩票软件ios下载| www.543551.com-吉林人玩彩-| www.684546.com-体彩p3和值遗漏| www.770547.com-新浪爱彩是什么| www.889209.com-易彩堂软件-| www.984457.com-彩运8导师-| www.co02.com-掌上购彩三分快三| www.uz72.com-南粤福彩-| www.08ki.com-933彩票合法吗| www.77bc.cc-福彩刮刮乐中奖| www.1340.com-七星彩今晚获奖码| www.00679.com-乐彩论坛手机板| www.54360.com-高手带彩票-| www.98611.com-比特币分分彩结果| www.062219.com-万彩网骗局-| www.164988.com-红彩会彩票网怎么样| www.252929.com-春庆老时时彩走势图| www.325506.com-01彩票下载安装| www.394040.com-设计色彩头像| www.536975.com-全国各地彩票种类| www.618709.com-酷彩彩票apo| www.687918.com-福彩3d字谜总会| www.763210.com-福利彩票骰子| www.870742.com-cp彩票平台-| www.948952.com-网上彩票平台排名| www.999938.cc-大乐透彩民村走势图| www.hz3.cc-106官网彩票下载| www.on91.com-中国体彩有哪些种类| www.7js.com-大庆新村彩票站出兑| www.61lj.com-富贵彩票下载安装| www.0375.cn-新年主题彩铅画| www.31549.com-足彩14场规则| www.78035.cc-足彩18168推荐| www.026324.com-网络彩票黑平台排名| www.099207.cc-福彩何首乌字谜| www.161766.com-分分彩后三500注| www.286622.com-安徽快三是违法吗| www.366849.com-快三助赢软件| www.453838.com-竞彩足球群-| www.536908.com-买彩票用什么名字好| www.636018.com-彩虹一号-| www.714889.com-祥云瑞彩什么意思| www.786959.com-盛兴彩票v1登陆| www.859246.com-福彩6加1中奖规则| www.919491.com-台湾快三秒奶茶店| www.974605.com-七呈彩开奖-| www.hm23.com-时时彩定三胆方法| www.xn06.com-体彩开奖江苏7位数| www.13om.com-福建体彩大星走势图| www.77jh.cc-23国际彩票平台| www.1082.pw-分分彩害了多少人| www.9259.biz-福乐彩是正常平台吗| www.44334.com-彩乐522-| www.86395.com-有app博彩软件| www.033130.com-互联网彩票何时恢复| www.103705.com-半打好彩人一动物| www.162771.com-快三的012路| www.284258.com-福彩1d的奖金| www.363596.com-鼎巨国际彩票合法吗| www.443997.com-c760彩票-| www.530383.com-幸运彩票助手下载| www.628956.com-诚信彩app下载| www.688736.com-彩29网址-| www.759537.com-大中华彩票集团| www.860211.com-奥客彩票论坛| www.915545.com-重庆时彩下载| www.970530.com-福彩排列七的走势图| www.cp7622.com-北京快三一定牛走图| www.lf14.com-306全民彩票| www.a28.pw-九千万彩票首页| www.21eq.com-网上时时彩犯法吗| www.673.cc-重庆时时彩关闭了| www.3764.com-全民彩票和全民智投| www.8776.com-彩票亏损分红套利| www.51487.com-彩虹糖的颜色和口味| www.90400.cc-彩票双色球摇奖机| www.036006.com-一分钟快彩下载| www.133297.com-批发彩钢围挡| www.198218.com-一分快三预测| www.260112.com-福利彩票中奖咋看| www.323162.com-乐和彩票app| www.382878.com-19002期胜负彩| www.536318.com-美国的彩票-| www.610111.cc-还有人买彩票| www.671395.com-彩宝彩票苹果版本| www.738888.cc-江苏快三诚信群| www.798675.com-盛世彩票线路入口| www.864492.com-178彩票-| www.916203.com-福利彩票店经营技巧| www.969043.com-网上刷彩犯法|