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.002184.cc-中国七星彩开奖直播| www.wp6.cc-精英彩票心水| www.93.me-红牛福彩下载安装| www.0202.loan-e赢彩下载-| www.1572.cc-彩宝网诈骗-| www.160709.com-北京彩票站转让信息| www.7pu.com-体彩门头牌设计规范| www.865690.com-网易彩票官方版| www.946987.com-体育彩票接口| 大赢家彩票网www.83033p.com| www.25562.cc-彩客网苹果手机版| www.259731.com-模拟彩票的软件| www.s55.org-三星福彩下载安装| www.79ud.com-200期福彩开奖号| www.3078.cm-六给彩票香港本期| www.0176.loan-国彩体彩-| www.zs41.com-双色球彩票玩法介绍| www.277857.com-彩票坊官方下载| www.558321.com-七彩玫瑰含义| www.634509.com-建盏蓝麒麟七彩光| www.731427.com-易彩堂怎么破解| www.801270.com-彩票猫路线-| www.878768.com-彩票的规律计算法| www.qw27.com-福彩快三广告牌| www.104625.com-竞猜足彩奖金计算| www.198321.com-1青海快三-| www.67958.cc-微信博彩平台| www.051307.com-一分快三能挣钱吗| www.117849.com-怎么看彩票中奖| www.70452.com-e58彩票-| www.051116.com-知彩官网-| www.122822.com-天天中彩票坑人吗| www.367286.com-彩铅手绘樱花树教程| www.48pm.com-张星彩与沮授强度| www.2898.top-诺亚彩票下载| www.9578.xyz-手机希望彩票正规吗| www.583795.com-中彩股份宁夏快三| www.692795.com-17彩-| www.8028.in-彩6标准版-| www.73477.com-手机9万彩票下载| www.td50.com-发彩网免费注册官网| www.600906.com-也买彩是骗局吗| www.842130.com-中超体彩-| www.958817.com-体彩几天开一次奖| www.ui89.com-下载北京快三| www.63sr.com-彩票最新结果查询| www.472722.com-福彩双彩网论坛| www.626838.com-过完年彩票几号开售| www.775556.com-河北体彩管理中心| www.38756.com-红彩网从哪下载| www.95466.com-关小刀足彩新浪博客| www.n71.org-体票彩票开奖公告| www.889907.com-体彩可以买cba吗| www.120.win-中国福利彩票赤峰| www.7283.cn-关于彩虹的童谣| www.l41.club-财神8彩票网| www.543722.com-福彩3d东湖社区| www.34926.com-博彩计划软件| www.052778.com-8k彩票网赚-| www.156338.com-海南休彩开奖结果| www.369322.com-8号彩票论坛马会开| www.504956.com-响排和彩排-| www.637106.com-彩虹六号透视辅助| www.805089.com-河内5分彩是真的吗| 华夏彩票www.hx1177.com| www.490389.com-旺彩游戏平台注册| www.666975.com-乐彩8603cc-| www.257679.com-038彩票正规吗| www.383959.com-福利彩票资格考试| www.011622.com-福利彩票直播| www.6733.cc-新彩吧3d字迷画迷| www.8660.vip-五洲彩票安卓下载| www.8747.com-彩票预测交流群| www.604965.com-中澳彩票靠谱吗| www.924937.com-也买彩官方网站| www.165965.com-快三河北-| www.sm07.com-湖北福彩一定牛| www.6885.com-大玩家彩票攻略| www.464287.com-买彩票有什么秘诀吗| www.068015.com-可以出票的假彩票机| 福彩www.16878d.com| www.4090.cn-彩虹7-| www.11980.com-福利彩票的选号规律| www.81291.com-皇冠彩票外围| www.026774.com-500购彩邀请码| www.109163.com-百彩免费料-| www.055378.com-江西快三彩票平台| www.38287.cc-555彩票网正规吗| www.661413.com-彩票3d漏洞-| www.4335.cc-鑫彩网娱乐下载| www.13499.cc-竞彩足球澳客网| www.44429.cc-赢彩彩票与全民彩票| www.690757.com-澳客网足球彩票比分| www.772968.com-彩金论坛-| 全民彩票www.97171.cc| www.2675.in-世界杯彩票停止销售| www.9952.cm-福利彩票双色球图| www.589644.com-最准的足彩预测专家| www.336456.com-博大彩票合法吗| www.33356.cc-杭州竞彩快三| www.949.win-百胜快三助手下载| www.4te.com-为什么彩票很难中奖| www.49lz.com-信阳体彩大奖得主| www.500013.com-澳洲五分彩平台| www.944487.com-聚彩彩票网合不合法| www.vk01.com-山东体育彩票| www.39127.cc-争神彩霸-| www.082.online-上诲快三开奖结果| www.373672.com-竞彩足球怎么玩| www.53358.com-好彩网实力三肖八码| www.003998.com-c59彩票app-| www.569255.com-福彩会改成企业吗| www.698258.com-浩博时时彩手机版| www.802566.com-15彩票-| www.947910.com-在哪里可以买彩票| 幸运彩票www.550806.com| www.91165.cc-彩票软件哪个比较好| www.659603.com-福利彩票双色球群| www.753065.com-怎么玩快三彩稳赢| www.cp02.com-私彩报警追回| www.q28.cc-世界杯彩票网上买| www.57mi.com-彩之星江苏快3下载| www.1338.in-投注体育彩票软件| www.88766.com-彩票74-| www.388591.com-什么叫微信彩友| www.5586.cc-彩乐购官方网址| www.19cy.com-大透乐彩票玩法| www.499.me-网络销售彩票推广| www.075590.com-购彩lll邀请码| www.984935.com-彩运8彩票-| www.377898.com-王者勋章彩虹行动| www.1857.cn-查彩票的app| www.098199.com-福利彩票3d下载| www.11qm.com-掌上购彩分分快三| www.561.date-智多星时时彩计划| www.57eo.com-福彩3d质合走势| www.7275.pw-台湾彩虹台网络直播| www.34561.cc-好彩网论坛首页| www.87132.com-七星彩网上投注平台| www.293643.com-青岛体育彩票站点| www.753481.com-福彩三d北京谜| www.824093.com-三彩服饰专卖店特价| www.888700.cc-中国福彩双色球开奖| www.965106.com-重庆时时彩骗局上万| 万历彩票www.77114s.com| www.kc00.com-搜狗彩票安全吗| www.m38.bid-九万彩票输了十几万| www.58fv.com-彩娃什么时候开奖| www.719752.com-福彩三d字谜今天的| www.804113.com-火箭计划时时彩| www.882481.com-基诺型彩票开奖结果| www.947375.com-彩报图·库-| www.982844.com-盈彩五分快三| 大赢家彩票平台www.976271.com| www.33878.com-新浪彩票平台怎么样| www.324928.com-华人彩是真的么| www.435632.com-好运彩票免费注册| www.518664.com-乐彩网全国开奖写| www.570066.com-大信彩票网-| www.618348.com-体彩11选五冷号| www.667726.com-福彩快3概率多少| www.733793.com-福彩多久开奖一次| www.79569.com-p3藏机图彩吧图库| www.052145.com-花式快三教学分解|