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天

知道了
1分快三 www.252058.com-6768彩票-| www.646164.com-蓝月亮天天好彩| www.6726.vip-亚洲28彩票-| E彩堂www.43818a.com| www.ws92.com-彩票路珠开奖网| www.032948.com-七星彩选号码| www.175183.com-大发快三赚钱| www.361411.com-hk百彩网开奖包中| www.380283.com-真的有人中彩票吗| www.506703.com-中国体彩三毛彩图片| www.659201.com-网络彩票引流话术| www.742785.com-彩票易中奖下载| www.791784.com-马来三分彩哪里开的| www.891575.com-网络彩票推销技巧| www.966843.com-保时捷娱乐彩票注册| www.cai8610.com彩神8-| www.371366.com-20选5彩票代理| www.466196.com-xy幸运彩票网站| www.576452.com-广西快三多久开奖| www.687060.com-体彩排三排五论坛| www.24uq.com-彩圣网彩圣资料网| www.365395.cc-广西快3福利彩票| www.144553.com-竞彩网三地开奖直播| www.303399.com-好彩三选号技巧| www.700306.com-辽宁福彩双色球| www.024464.com-网易3d彩票下载| www.010570.com-湖北体彩短信投注| www.271382.com-好彩香烟蓝莓| www.881405.com-代码博彩app| www.406644.com-济南结婚彩礼| www.2120.wang-苏州市福彩中心| www.51947.com-旺彩四肖8码| www.001419.com-快三重一注多少钱| www.928860.com-玩彩乐客户端| www.cp231.com-谁有大发快三网址| www.t91.bid-信彩娱乐最新地址| www.2121.site-中国全部彩种| www.543885.com-阳彩臂金龟-| www.667274.com-香港赛马彩票图片| www.761299.com-彩票147-| www.844411.com-石家庄福彩弃奖| www.914611.com-购买彩票的app| www.972721.com-竞彩网触屏版| www.pf.com-平台彩票赌博被骗| www.qd54.com-80彩官方下载| www.10nx.com-彩票报道央视| www.36297.com-福彩能网上购买吗| www.639608.com-体育彩票足彩申请| www.869538.com-手机买七星彩彩票| www.cai9188.com河北快三二同号推荐| www.k32.net-3d彩民乐精华版| www.123767.cc-刮刮彩票-| www.275490.com-彩6苹果下载安装| www.442676.com-排列五彩票开奖号| www.579746.com-44彩票黑网-| www.680209.com-号百彩票诗词网| www.110421.com-福彩3d对应码| www.733817.com-彩票新规影响| www.031703.com-彩票哪个平台靠谱| www.050006.com-黑彩庄家稳赚不赔吗| www.658985.com-青蛙论坛青蛙彩票| www.861157.com-七星彩开奖号码直播| www.830640.com-广州彩色打印机租赁| www.634077.com-91彩票网站-| www.371965.com-快三三角图-| www.199760.com-时时中彩票app| www.559.cm-重庆时时彩五星龙虎| 幸运彩票www.5095t.com| www.101501.com-澳客彩票app下载| www.198442.com-乐彩网大发快三| www.279632.com-时时彩规律研究| www.98893.com-彩云而来专家专栏| www.812248.com-福彩差5运用| www.402181.com-好彩客中奖能提现吗| www.232032.com-9188彩票-| www.404046.com-体彩排列5长条| www.1655.vip-博金彩票站官方网站| www.4947.cm-迷彩兔军事简介| www.9858.cc-古建筑旋子彩绘图案| www.47748.com-好彩妹蛇精扮演者| www.85278.com-天空彩票四字解特| www.817886.com-足彩19026期| www.63hm.com-nba精彩视频| www.178998.cc-快三屠龙-| www.44nx.com-压大小正规彩票| www.1971.top-5k彩票注册-| www.101557.com-360竞彩比分| www.338564.com-武汉体彩中心地址| www.23vc.com-好彩网是谁创建的| www.2162.wang-时时彩能网上买| www.n89.org-玩彩如何止损| www.795232.com-上海11选5彩乐乐| www.347883.com-福彩双色球奖金计算| www.079286.com-星彩科技-| www.02wm.com-86彩票网-| www.858458.com-福彩易点网-| www.930829.com-福彩体彩玩法| www.982505.com-彩票365下载| www.yi9.cc-快三开奖今天| www.972340.com-体彩开奖结结果今天| www.73046.com-搜索福彩藏机图| www.028482.com-365天天彩票| www.186431.com-福利彩票快3怎么买| www.680331.com-体彩礼拜几开奖| www.772298.com-有正规的彩票平台吗| www.873137.com-欠债突然中彩票| www.es37.com-中彩网擂台赛| www.w30.top-彩溢会馆-| www.935.date-七乐彩每晚几点开奖| www.7563.com-幸运三彩票-| www.17678.cc-网上赌彩票怎么玩| www.907068.com-那种彩票六位数| www.975402.com-滨州福彩客户端下载| www.fz0.cc-快三网址是多少| www.876283.com-体彩5d一等奖| www.83jb.com-福利彩3d走势图| www.4735.biz-龙和虎彩票-| www.cai19.cc-快三助手-| www.562237.com-开心七星彩票网| www.629879.com-彩票数字规则| www.695099.com-足彩稳胆规律| www.765880.com-快三投注倍率表| www.826189.com-彩票吃人-| www.895809.com-江苏彩票七位开奖| www.952484.com-中奖彩票软件安卓| www.995906.com-体彩竞彩加奖| www.st3.cc-全部彩种-| www.mp70.com-时时彩最快开奖软件| www.8001.xyz-彩虹伞小班-| www.010681.com-时时彩注册送彩金| www.5494.xyz-彩神国际破解版| www.740123.com-金龙彩票安卓版| www.24490.cc-彩铅画古典美人| www.076119.com-凤凰彩票全天计划| www.36dl.com-七星彩最大值| www.cl2.com-江苏快三是赌博吗| www.rh31.com-天津时时彩开奖走势| www.21633.cc-6678彩票网站| www.87815.com-顺龙彩票-| www.6513.org-珠江彩票app下载| www.55248.cc-幻彩曲棍球1下载| www.37tb.com-陕西福彩快三走势图| www.4797.biz-彩虹六号下载慢| www.26252.cc-彩色短句-| www.86454.com-50万彩票-| www.041111.cc-手机彩票挂机平台| www.173618.com-福彩快三奖金规则| www.348337.com-乐彩网用户登录| www.446210.com-电话购彩票安全吗| www.545766.com-福利彩票去哪里申请| www.702976.com-彩票0369技巧| www.807527.com-河内5分彩开奖| www.901304.com-彩票基础知识| www.959475.com-易彩网快三-| 老彩票www.775704.com| www.022607.com-爱乐彩广西快三| www.473671.com-福利彩票站怎么样| www.96711.cc-足彩大赢家比分直播| www.458828.com-彩票大赢家组选遗漏| www.595391.com-鑫彩国际怎么玩| www.670448.com-彩娃彩票是正规的吗| www.189481.com-时时彩稳赚的方法| www.345034.com-体育彩票足球比赛| www.886129.com-欢迎登录神州时时彩|