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.657413.com-今天是什么彩票开奖| www.0126.cc-彩票总类-| www.506648.com-时时彩8码怎么赚钱| www.805902.com-十元刮刮乐彩票种类| www.980123.com-彩票销售员南京| www.62.bid-合创彩票平台| www.xa58.com-山西快三开奖走势图| www.0202.pw-万和城彩票平台登录| www.05375.com-买彩票能中1万吗| www.597106.com-满堂彩彩票网app| www.717579.com-水彩入门-| www.819167.com-世界杯彩票规则| www.897105.com-久久发彩票-| www.963797.com-大发快三计算| www.86pk.com-乐彩购彩大厅| www.662082.com-中国福利彩票93期| www.022324.com-彩易网手机站| www.114111.com-3d跨度彩经网| www.04ko.com-彩铅画玫瑰绘画教程| www.83nl.com-诺亚彩票会不会崩盘| www.4080.cc-app彩票注册彩金| www.631314.com-港彩开奖结果查询| www.717788.com-安徽彩票在哪里兑奖| www.772285.com-天天彩票手机合法吗| www.883419.com-彩票端合法吗| www.962341.com-湖兆省快三开奖查询| www.cai6277.com吉林福彩快三走势| www.517368.com-出售高频彩平台| www.206373.com-神州彩票安全吗| www.601050.com-双色球彩票烂了一点| www.ey27.com-时时彩助手旧版| www.410084.com-彩票大乐透的软件| www.521424.com-河南幸运彩票开奖| www.894122.com-今天彩票3d图| 金彩www.981jc.com| www.yf2.cc-玩彩绝招-| www.907501.com-胜利彩票登录网址| 500万彩票www.39500z.com| www.079031.com-彩票3d九宫八卦图| www.0fj.com-大乐透文集乐彩网| www.112.gg-彩库宝典安卓| www.93171.cc-彩钢瓦屋顶厚度| www.nq.com-福彩快三就是赌博吧| www.740097.com-澳彩客户端-| www.588399.com-彩票金额-| www.757308.com-彩票刷流水给佣金| 中彩网www.61233q.com| www.08vv.com-彩票体彩开奖号| www.062134.com-快三提现-| www.040034.com-福利彩票销售系统| www.616087.com-百万彩友高手| www.753181.com-香港跑马彩票5分| www.749567.cc-鸿运彩票软件手机版| www.885738.cc-彩虹张惠妹歌词含义| www.057796.com-辽宁快三开奖| www.390307.com-有没有黑客黑私彩网| www.229700.com-福彩3g-| www.903849.com-福彩3d形态-| www.75971.com-收藏奥运彩票多少钱| www.017833.com-彩81彩票骗局| www.4796.org-彩票5星统计软件| www.19382.cc-红旗彩票下载| www.658622.com-代买彩票中奖没给钱| www.885412.com-彩票一购彩大厅| www.981194.com-七彩雪糕-| www.rr25.com-彩钢围挡门-| www.61151.com-038彩票网页登录| www.029162.com-8体彩屋是真的吗| www.617175.com-彩票丢失别人能领吗| www.697938.com-手机彩票网大全| www.766444.com-福彩3d杀码家彩网| www.735157.com-玩彩票得多少本金| www.054137.com-五分快三技巧视频| www.64478.com-彩钢瓦围挡施工方案| www.099334.com-体育彩票中奖新闻| www.479678.com-竞彩单场比分查询| www.237414.com-内蒙快三5月11号| www.000334.com-天津时时彩开奖图| www.ss77.com-小鹿彩票开奖表| www.155549.com-凤凰彩票怎么玩啊| www.15qq.com-体彩有关的对联| www.418611.com-上海体育彩票兑换处| www.529587.com-彩6彩票电脑版| www.614066.com-大马彩开奖成绩| www.92056.com-丰彩彩票安全吗| www.py06.com-福彩快三速查表图| www.595802.com-中国福彩和华夏鑫彩| www.673178.com-体彩任九规则| www.750255.com-下载一个天天中彩| www.815414.com-昨日体彩中奖号码| www.cp4343.com-快三二不同技巧| www.56638.cc-鸿远彩票计划团队| www.0160.loan-五彩饺子-| www.5969.tv-体彩如何看结果| www.11780.com-彩神v违法吗| www.97898.cc-中国彩票真吗| www.322292.com-足彩先买平再对冲| www.441746.com-彩票站招店员一名| www.532181.com-买彩票秘决-| www.120855.com-福彩双色球选号高手| www.197234.com-乐彩骗我30万| www.481889.com-彩之王的下载地址| www.579421.com-酷彩锅-| www.941338.com-彩票销售话术| 500彩票www.303479.com| www.uk09.com-搜狗彩经网-| www.30nn.com-极速分分彩开奖官网| www.55959.cc-福彩大乐透开奖时间| www.018788.com-彩乐汇利盈二分快三| www.077661.com-3d新彩票走势图| www.136316.com-梦想彩票站注册| www.114025.com-福彩案进展-| www.9716.biz-七星彩1-| www.083448.com-东彩彩票-| www.178567.com-5oo彩票网-| www.742368.com-i8彩票平台-| www.875707.com-福利彩世界下载地址| www.af41.com-手机手机彩票123| www.2132.wang-高频彩票为何一定输| www.162289.com-竞彩足球预测| www.n58.cc-天天爱彩票官网| www.809646.com-微信网上购彩可信吗| www.923227.com-北京彩票双机转让| www.uf9.cc-安徽快三单选单| www.46ui.com-体彩店投资多少钱| www.1al.cc-彩经网一搜狗| www.2090.vip-旺彩助手-| www.378.website体育彩票中奖怎么领| www.128346.com-分分快三输钱| www.201192.com-七星彩预测最准号码| www.460075.com-腾讯国际彩票中国彩| www.8969.cc-彩娱乐代理-| www.js53.cc-彩票33安卓版下载| www.473632.com-彩票排列三怎么玩| www.581671.com-彩票123网站大前| www.669027.com-海南什么私彩天天开| www.773947.com-彩博888资料网站| www.869722.com-浙江福彩3d开机号| www.943155.com-上海快三开奖历史| 新盈彩www.xinyc8.com| www.nu63.com-网上买彩票算赌博吗| www.z80.cn-彩福网最新码报结果| www.992544.com-快乐彩任选五怎么玩| www.990189.com-77彩票提现不到账| www.fp97.com-北京快3福彩app| www.09fp.com-福彩六十一开奖查询| www.96gp.com-彩之堂正规吗| www.3609.cn-微彩平台登录| www.02963.com-爱中彩票-| www.77269.cc-重庆彩票怎么玩| www.572297.com-743好彩网下载| www.656917.com-彩贝游戏平台| www.751082.com-彩8万下载-| www.952879.com-福彩30选7开奖| www.997166.cc-11选五北京爱彩乐| www.kq5.com-体育彩票快三走势图| www.vj25.com-手机网易彩票合法吗| www.128716.com-福彩刮刮乐种类| www.191727.com-256彩票app| www.276935.com-体彩大乐透深圳中奖| www.544451.com-买彩票怎么玩| www.675385.com-今晚体彩开奖号码是| www.325844.com-彩店宝跑了-| www.24ce.com-足彩总进球数怎么说|