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.0110.net-大平台彩票网| www.700942.com-福彩出号走势图| www.833151.com-77彩票平台-| www.938955.com-澳客体彩客户端下载| www.of8.com-江苏快三有什么技巧| www.39wk.com-聚丰彩票心水资料| www.757230.com-乐彩平台靠谱吗| www.246181.com-一分钟快三技巧| www.370251.com-天网诈骗彩票| www.495112.com-足彩通红球球app| www.576920.com-红彩彩票app| www.99193.com-收365账号足彩吧| www.139988.com-宁波体彩领奖流程| www.336791.com-河北快三冷号| www.21ve.com-状元彩票网平台| www.92344.com-好聚彩平台下载| www.557173.com-现任福利彩票主任| www.397183.com-红旗彩票首页注册| www.395585.com-礼拜一开奖的彩票| www.117659.com-2019竞彩普及日| www.25op.com-ig传统彩赛车优惠| www.879728.com-彩票开奖采集| www.593.live-时时彩两期计划网页| 鸿运彩票www.hy5507.com| www.328843.com-注册棋牌游戏送彩金| www.095599.com-福利彩票代打兼职| www.38455.com-河北福彩双色球休市| www.lm75.com-福彩3d中彩网北斗| www.401.in-手机网上怎么买福彩| www.480197.com-彩云网盘怎么用| www.63891.com-体彩足球胜负平规则| www.6646.cc-众博彩票网官方注册| www.2708.top-牛蛙彩票资料跑狗版| www.131376.com-旧够力七星彩奖表| www.259185.com-双色球福利彩手机版| www.459991.com-中华彩票黑平台| www.890678.cc-体彩排列三猜谜面| www.70jc.com-彩霸王论坛今期秘诀| www.917258.com-去哪里举报网上彩票| www.xt45.com-也买彩app官网| www.615966.com-体彩扑克牌对子包选| www.668818.cc-体彩龙虎是什么意思| www.112288.cc-最大的彩票网站排名| www.378400.com-中国双色球福利彩票| www.564165.com-中彩网会员号是什么| www.761342.com-好彩下载-| www.45453.com-微彩站申请-| www.928787.com-中福时时彩怎么提现| www.950676.com-大乐透彩民乐图谜| www.rt70.com-我爱彩票官网| www.911551.com-三亚彩票犯法吗| www.fg6.cc-新疆福利彩票网| www.084619.com-体彩机器连接电视| www.bx76.com-彩票长龙最长有多少| www.783749.com-开彩票投注站经历| www.ut69.com-时时彩客户端| www.2398.cn-青蛙彩网站-| www.035938.com-彩票用语高双| www.668942.com-体彩排三谜语总汇| www.fc24.com-福彩快三河北走势| www.82ck.com-篮球竞彩软件ios| www.3786.biz-hk百彩网开奖资料| www.zz20.cc-彩票店怎么申请| www.084287.com-河内五分彩精准计划| www.109368.com-被金利彩票骗了| www.0523.link-福彩今晚开奖号| 91彩票网www.912254.com| www.bu33.com-网上投彩票合法吗| www.716619.com-彩铅画动物毛发排线| www.861377.com-什么是彩票群英会| www.982146.com-唯彩双色球推荐| www.yn84.com-微信上的彩票导师| www.0151.me-重庆时时彩稳赢助手| www.867611.com-廉江七星彩高手论坛| www.4163.com-四重彩虹-| www.625239.com-开彩票盘需多少钱| www.819781.com-射手座买彩票什么号| www.550491.com-免费博彩论坛| www.952643.com-江苏快三免费计划网| www.67oo.com-彩吧三d图谜第五版| www.20438.com-竞彩网篮球比分直播| www.059102.com-竞彩即时比分| www.551699.com-福利彩票周即可以买| www.734164.com-三合中彩-| www.792776.com-彩票中奖符如何画| www.424815.com-193大赢家彩票| www.298779.com-彩29-| www.480481.com-排三新浪体彩| www.666978.com-乐彩的骗局-| www.841627.com-七乐彩杀号全对公式| www.126947.com-优彩网下载安装| www.538612.com-网易彩票怎么停了| www.742679.com-以前金山改成酷彩吧| www.563719.com-彩票网站的漏洞赚钱| 百姓彩票www.bxcp3.com| www.1qb.cc-河南体彩兑奖时间| www.487722.com-网购彩电-| www.563891.com-福彩3d今日图迷| www.632456.com-彩票如果兑奖| www.756524.com-208彩票网客户端| www.923000.com-竞彩亚盘是什么| www.91607.com-广东彩王图库| www.821111.com-我附近的福彩销售点| www.sw41.com-7星彩玩法介绍图片| www.574733.com-糖果彩平台-| www.181448.com-福彩快三赔-| www.348941.com-体彩店间隔-| www.89856.cc-彩票交流app| www.580.cc-浙江福利彩票网开店| www.n47.gg-分分彩官网平台| www.100628.com-8亿彩真的能挣钱吗| www.856385.com-体彩苏州市电话| www.39944.cc-博牛彩票团队| www.706866.com-51中彩彩票网| www.821597.com-济南福彩体彩站转让| www.905105.com-彩票行业前景如何| www.964251.com-竞彩足球彩票官网| 国彩彩票www.98779.com| www.ln84.com-时时彩什么平台最好| www.e95.me-七乐彩投注机选号| www.181311.com-竞彩足球app| www.09817.com-c81彩票-| www.007510.com-今晚彩票开奖号| www.359759.com-七星彩会员软件| www.616332.com-足彩3串3-| www.704408.com-彩票33平台怎么样| www.183466.com-中国福彩3d-| www.657620.com-新盈彩app地址| www.295723.com-辽宁快三开奖查询| www.333241.com-玩彩倍投技巧| www.439956.com-重庆时时彩长龙统计| www.525566.com-体育彩票七-| www.605548.com-什么彩票平台最好| www.670177.com-买彩票几位数中奖| www.an34.com-贵州福彩投注站| www.981532.com-尊彩网官方官网| www.017.in-彩20app下载| www.7083.vip-m5彩票线路-| www.18278.com-福彩天地报在线今天| www.72955.com-8彩快三计划软件| www.021949.com-下载金冠彩票| www.045185.com-博发彩票犯法吗| www.126910.com-彩铅画五官教程| www.19416.com-博友彩安卓版下载| www.627837.com-体彩任九怎么看结果| www.729511.com-快三复式万能5码| www.800121.com-如何制作快三走势图| www.879508.com-花生彩票是骗局吗| www.970964.com-体彩票号几种| www.iz36.com-辽宁体彩11选五| www.7498.cm-青海省福彩中心官网| www.639703.com-彩票软件传销| www.713.cm-时时彩怎么做代理| www.73dp.com-体彩杀码预测| www.884050.com-黑彩怎么刷流水| www.968914.com-买了彩金很后悔| 500彩票www.50051l.com| www.318418.com-彩彩票app下载| www.570881.com-福彩15选-| www.941712.com-彩票导航平台| www.005590.com-信搏彩票网址| www.5125.biz-高彩荣紫砂壶价格| www.207495.com-彩票软件大全双色球| www.298973.com-彩03app-|