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天

知道了
9彩注册 www.383532.com-淘宝彩票改名叫什么| www.668875.com-彩票领奖吧-| www.809042.com-彩票中奖心得| www.957458.com-北京单场体育彩票| www.gy42.com-百盈共享彩票邀请码| www.mm75.com-500彩快3下载| www.270298.com-查彩票app-| www.827565.com-竞彩足球结果| www.290169.com-好彩客是合法的吗| www.397530.com-体彩天庚图-| www.809003.com-微彩出款不了| www.917797.com-彩虹代刷网装修代码| www.999452.com-大运彩票手机版平台| www.ll20.com-中國彩吧-| www.24or.com-六福彩票下载| www.3270.vip-香港富彩导航| www.711.site-时时彩后二稳赢| www.658230.com-电视剧彩票-| www.15231.cc-彩吧论址首页| www.344768.com-彩8娱乐重庆时时彩| www.751452.com-人人中彩app| www.886328.com-特彩吧app-| www.384805.com-黑客侵入福彩| www.719389.com-福彩排列5开奖公告| www.890937.com-体彩作假-| www.988772.com-快三投注第一网站| www.qb00.com-彩票所有应用大全| www.43dt.com-0k彩票下载安装| www.888858.com-彩票网站是骗局吗| www.562132.com-买快三三倍赚翻了| www.676386.com-开奖3d福彩87期| www.710954.com-彩票365安全吗| www.ru27.com-网上买彩票哪个网站| www.0583.wang-快三的十大秘诀| www.360661.com-体彩买球规则| www.ta26.com-彩票都有几位数组成| www.820075.com-天津时彩开奖时间表| www.969197.com-天天中彩票登录不了| www.cp3155.com-福彩快三官方下载| www.061048.com-网易彩票大乐透预测| www.419272.com-乐透彩票开奖历史| www.0839.cc-网上怎么购买足彩| www.138812.com-内蒙古快三和跨走势| www.313278.com-大发彩票正规吗| www.835981.com-双色球彩票中奖新闻| www.if6.com-新内蒙快三-| www.4bb.cc-移动动梦网炫彩版| www.5451.org-彩虹主站搭建| www.913771.com-彩客彩票官网电脑版| www.qw6.cc-吉林快三型态走势图| www.07mp.com-哪种彩票返奖率最高| www.1158.cc-时时彩挂机软件定制| www.11632.cc-打彩平台什么意思| 全民汇彩票www.52303o.com| www.637933.com-彩票公益金余额| www.588254.com-迷彩免app-| www.34013.com-多彩贵州网频道| www.125214.com-福利彩票都分多少种| www.w63.net-靠时时彩翻身的人| www.1559.wang-彩宝贝排列三走势图| www.038556.com-大乐透彩票图片大全| www.504844.com-湖北宜昌彩票中奖| www.225925.com-刷彩票赚钱-| www.25200.com-众彩网排三专家预测| www.031006.com-彩票骗局相亲| www.988605.com-必中彩票app下载| www.950896.com-大乐透彩民乐图| www.80je.com-北控国彩仇卫民| www.7183.net-七彩阳光配蹦迪音乐| www.030170.com-彩吧app下载| 惠民彩票www.hm5699.com| www.718618.com-彩虹色是什么意思| www.672590.com-湖南彩票论坛首页| www.264513.com-彩票众众-| www.872.cm-中国竟彩足球胜平负| www.338472.com-香蕉计划彩票软件| www.455528.com-问题彩民求救机构| www.973094.com-彩虹7号-| www.149008.com-怎么破解彩票软件| www.031316.com-下彩官网-| www.676783.com-酷彩吧哪里可以下载| www.061382.com-中华彩票网是真的吗| www.599776.com-彩票中奖10000| www.087329.com-彩37彩票网站| www.073722.com-体彩专家胆码家彩网| www.253663.com-彩票稳赚不赔的平台| www.544573.com-有人做500彩票么| www.653031.com-釉彩大瓶设计者| www.x28.club-红旗彩票中彩网| www.ud0.com-福彩体彩开奖号| www.08482.com-彩票360官网安全| www.68007.cc-微信腾讯彩票游戏| www.462013.com-中华公益福彩开机号| www.606657.com-长沙福利彩票申请| www.714466.com-凤凰网彩票是真的吗| www.826056.com-快三多少钱一注| www.923230.com-亚盘和竞彩区别| www.985189.com-网彩是不是都是输| www.zb4.com-快三开奖时间调整| www.qc28.com-安徽省福彩中心站| www.v22.org-南洋彩开什么| www.609496.com-分分彩万为计算公式| www.884533.com-双彩网3d图谜正| www.965281.com-快频彩开奖时间| 500彩票www.50074d.com| www.sd74.com-3d福彩开机号| www.61.me-怎么戒掉时时彩| www.71og.com-恒大彩票网址多少| www.455626.com-福彩区块链-| www.655174.com-重庆十十彩开奖号码| www.758871.com-微彩站app官网| www.851290.com-360足彩大厅| www.911434.com-吉林体彩中心地址| www.151313.com-重庆时时彩中奖助手| www.285921.com-36o彩票下载安装| www.37ol.com-安阳各地彩礼一览表| www.758.date-时时彩和值尾数技巧| www.4674.win-中堂彩自动报码| www.958640.com-福利公益彩票全天彩| www.cp5596.com-北京快三和值走图| www.500914.com-彩色证件照是什么底| www.570026.com-拉人玩网络彩票| www.636239.com-重庆时时彩登录链接| www.67oq.com-体彩转让泰安| www.9698.wang-体彩金七宝免费下载| www.60161.com-7天彩苹果下载| www.028686.com-黑彩每天赚钱| www.125364.com-福利彩票购彩软件| www.306425.com-彩688-| www.773569.com-快三庄家能挣钱吗| www.866255.com-腾讯彩票软件| www.930281.com-陈勤敬彩票案| www.976849.com-山东枣庄彩礼价格表| 500万彩票www.967333.com| www.6062.vip-七星彩彩票图片大全| www.533501.com-那种彩票简单| www.556752.com-新浪彩票动态澳盘| www.683158.com-老凤祥彩金调换规则| www.795088.com-新未来彩票下载安装| www.908373.com-福彩快3真的假的| C9999www.318548.com| www.079642.com-众博彩票99zdc| www.169079.com-河南福彩22-| www.19968.com-那个网上幸运彩| www.493003.com-凤凰彩票私彩平台| www.2867.vip-海南七星彩走势| www.4312.biz-彩票销售提成多少| www.29982.com-万彩吧彩票3d预| www.70909.cc-彩票的中奖号码查询| www.030866.com-网上彩票帮人代玩| www.295111.cc-福彩调整公告| www.697362.com-七星彩选号技巧大全| www.795522.com-八仙过海牛彩了网| www.883964.com-体彩七位数中奖规则| www.sg95.com-幸运时时彩-| www.45cy.com-正版福利彩图诗句| www.996496.com-新加坡天天彩资料| www.ty3.com-北京5分彩开奖号码| www.pp89.com-今日3d双彩图| www.83kk.com-竞彩258彩票投注| www.954018.com-万博彩票网官方端口| www.cp0204.com-上海快三彩票走势图| www.mx92.com-国民彩票手机版| www.15yy.com-体彩大乐透查|