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天

知道了
彩票123现在叫什么名字 www.2538.club-直播彩播啥意思| www.502435.com-足彩怎么胆拖| www.631608.com-今期广东彩王报| www.26385.cc-福彩3d今日开机号| www.217783.com-福星彩-| www.308719.com-网上彩票投注站加盟| www.437180.com-哪个彩票中奖几率高| www.551952.com-南昌彩票店转让信息| www.870178.com-五福彩彩票是真是假| 大赢家彩票网www.54400k.com| www.ne38.com-038彩票网页版| www.03ji.com-快乐彩票网址多少| www.520.mobi-时时彩过滤缩水软件| www.340101.com-怎么p彩票中奖| www.895070.com-网络彩票漏洞群| www.999043.com-下彩app客户端| www.el13.com-正规的网络购彩平台| www.08015.com-上海大乐透彩票大奖| www.385311.com-彩票大平台推荐| www.532841.com-彩票号码均衡论| www.712114.com-快三是有人控制嘛| www.817491.com-5分彩是骗局吗| www.909192.com-福彩梅子今天预测| www.976223.com-彩礼和嫁妆的区别| www.cp3310.com-分分快三下载| www.qp35.com-快三是啥意思| www.4pa.com-咋买彩票能中大奖| www.139038.com-福彩3d去哪兑奖| www.312204.com-七乐彩专家杀号推荐| www.3171.top-幸运分分彩官方开奖| www.9707.loan-三分pk彩票-| www.084618.com-宝盈彩app苹果| www.798827.com-福彩快3每天几期| www.931252.com-皇冠彩票网被骗了| www.ml65.com-山东省体彩扑克三| www.007777.com-福彩那几天开奖| www.359756.com-寒香公主体彩断组| www.143823.com-炫彩快线-| www.623906.com-彩票33cc-| www.te.cc-网站彩票快三合法吗| www.j24.cc-澳门足球博彩| www.148155.com-哪个彩票平台正规| www.025900.com-75彩票app-| www.58jo.com-709彩票注册| www.6011.cc-吉刮彩-| www.pd06.com-福彩三d预测号| www.56536.com-时时彩输钱的原因| www.234567.com-快乐彩app下载| www.330575.com-立彩彩票追号计划| www.424518.com-天天赢彩票注册登录| www.560527.com-福彩3d彩宝贝| www.676938.com-彩色的包装袋机器| www.770700.com-3d福彩论坛| www.897611.com-竞彩足球暂定赛程| www.969596.com-体育篮球竞彩网首页| www.cai780.com-福彩五分快三是什么| www.y17.com-国际彩票网站有哪些| www.09651.com-11006移动彩票| www.717464.com-彩客足彩比分直播| www.455432.com-福乐彩票-| www.127921.com-雨后彩虹图片大全| www.386038.com-天津七星彩开奖| www.527070.com-八号彩票软件下载| www.627072.com-香港红财神彩图| www.25393.cc-彩铅桃花-| 顶级娱乐www.047788.com| www.360066.com-为什么有那么多私彩| www.520898.com-快三这期能出什么号| www.491288.com-10大黑彩平台| www.654807.com-ug彩票分分秒开| www.27731.cc-单个彩铅画图片大全| www.447210.com-众彩网是国家开的吗| www.250625.com-福彩手机购彩安全吗| www.380511.com-彩票首存送-| www.557575.cc-彩宝贝双色球走势图| www.620216.com-彩票易中奖官网| www.799027.com-刺客研彩论坛| www.632573.com-七彩视界骗-| www.728595.com-中国体彩七位数开奖| www.805567.com-风云彩票-| www.883964.com-体彩七位数中奖规则| www.952099.com-qq彩票谁代理的| www.998631.com-香港快三是官方的吗| www.dx17.com-百盈快三正规吗| www.j36.me-彩票下注平台| 博友彩www.877802.com| www.ks29.com-湖北快三随州论剑| www.f70.com-福彩3d最新谜语| www.7788.com-俄罗斯复活节彩蛋| www.31316.com-福彩专家精准杀码| www.013533.com-七星彩1500-| www.207944.com-中国福利彩票快开彩| www.293795.com-揭秘网络黑彩票| www.526191.com-王者彩票网-| www.749564.com-双赢彩票是骗局吗| www.310579.com-彩九最新版本下载| www.547457.com-网上购彩软件安全吗| www.949540.com-爱盈彩是真的吗| www.439522.com-彩之星助手-| www.369478.com-福建体彩彩民论| www.132787.com-彩色纸盒包装| www.dj65.cc-飞鱼彩票玩法规则| www.789049.cc-民政部福利彩票案| www.895453.com-九万彩票安卓软件| www.984276.com-利奥彩票平台网址| www.003663.com-中奖彩票电影| www.086851.com-体育彩票怎么玩的| www.189984.com-江苏快三多久一期| www.356420.com-彩票不能提现追回| www.496543.com-917彩票平台下载| www.587488.com-奇门遁甲测港彩生肖| www.765262.com-最高手七星彩解诗网| www.862667.com-体彩大乐透开奖| www.954053.com-大发快三邀请码注册| www.2386.in-福彩快三开奖音乐| www.34879.com-体彩三十一选七| www.94816.com-足彩概率公式| www.163357.com-江苏快3十分彩下载| www.322751.com-全民彩票安卓| www.507466.com-购彩网彩票网址| www.795038.com-中国福彩欢乐12| www.909099.cc-澳门5分彩开奖结果| 大玩家彩票www.9478w.com| www.74384.com-彩票126app-| www.8805.loan-分分彩论坛-| www.301312.com-内蒙快三冷热号| www.665420.com-体彩金七宝下载网址| 天天彩票www.2373i.com| www.757793.com-胆拖投注彩票开奖| www.202329.com-贵州彩票中心地址| www.371692.com-5050彩票网-| www.74qu.com-体彩怎么算中奖金额| www.8789.pw-山东齐鲁彩票欢迎你| www.009286.com-体彩五星彩查询| www.385564.com-梦到彩票号码要守| www.ow25.com-彩票诈骗案怎么判刑| www.47kv.com-东方彩虹-| www.5275.online彩票点几点下班| www.91yr.com-彩票工资车有哪些| www.04rm.com-彩铅画初学者| www.604669.com-彩中彩是真的吗| www.11sy.com-天下彩票一天下彩网| www.22786.com-中国体育彩票怎么看| www.kg73.com-新彩票网走势图| www.57005.cc-宜春体彩中心地址| www.001488.com-体彩高管-| www.008422.com-十六号体彩中奖号| www.887391.com-彩票开奖漏洞破解| www.974459.com-福彩克星最新字谜一| www.uf99.com-彩票106投注版| www.85hx.com-彩吧陈华-| www.6968.me-极速赛车彩票的规律| www.35194.com-快购彩票软件| www.021764.com-体彩销售额-| t--内蒙快三专家推荐| www.5010.me-吉祥彩票网站可靠吗| www.211212.com-宁波福利彩票快乐彩| www.630466.com-就业肘报3d天天彩| www.730025.com-久久彩票有人赢吗| www.736267.com-银彩通下载-| www.069522.com-双色球命中中彩专栏| www.187551.com-重庆时时彩已下架| www.616668.cc-买足彩半全场技巧| www.796646.com-快三守号怎么赚|