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.013726.com-七星彩大中小走势图| www.00lh.com-彩虹这首诗怎么写呢| www.0208.pw-网易彩票怎么停了| www.14674.com-彩票之家与免费大全| www.209074.com-私彩平台出租| www.318948.com-体彩福彩加盟电话| www.751549.com-手机投注三分彩| www.837737.com-微信福彩电子投注单| www.913508.com-彩客即时比分| www.973170.com-彩虹主站官网| www.cai3168.com安徽快三投注一定| www.me63.com-天猫彩票是正规的吗| www.6gz.cc-中国体彩属于企业| www.79oz.com-极速时时彩一期计划| www.2946.xyz-158时时彩计划| www.9684.biz-原版特彩吧-| www.52991.com-体彩排五开奖结果| www.009727.com-新华彩票app| www.41929.com-中国彩吧购彩大厅| www.92784.com-力彩写真机怎么样| www.057701.com-梅子3d预测新彩网| www.151035.com-七乐彩五行走势图| www.223970.com-浙江体彩6十1| www.130861.com-湖南福彩中心图片| www.217622.com-云发购大发快三下载| www.293373.com-智慧彩挂机网| www.662508.com-预言家专业彩票计划| www.110267.com-七星彩怎样包码| www.203278.com-中彩票故事-| www.531216.com-彩铅手绘初学者教程| www.657991.com-福彩电子走势图软件| www.801081.com-福利彩票电话| www.127401.com-竞彩网计算机胜平负| www.140411.com-彩九九彩票-| www.431274.com-选6型彩票缩水软件| www.573107.com-澳门体彩app| www.611788.com-快乐双彩开奖公告| www.536216.com-现在有多少种彩票| www.738876.com-微信彩票交流群| www.874766.com-亚博彩票可靠吗| www.331.cc-色彩的视觉感受| www.6542.in-汇盛彩票-| www.72666.cc-福彩消宝石机器| www.088322.com-快三权威软件著作权| www.jg57.com-吉林快三规律的书| www.20642.com-玩时时彩心态很重要| www.157524.com-如何玩好竞彩单场| www.325454.com-海南彩票网论坛| www.476980.com-体育彩票场次| www.584400.com-91彩神兼职-| www.830670.com-顶级彩app-| www.50fv.com-快三职业彩民一天| www.313116.com-三d双彩论坛字谜| www.495326.com-彩漂泡衣服时间太长| www.723030.com-彩票暴利-| www.mb29.com-百度快三和值跨度表| www.451501.com-幸运分分彩是哪里开| www.875064.cc-彩九com-| www.zw74.com-够力七星彩奖表开奖| www.322905.com-福彩3d好123| www.439876.com-注册账号玩彩票| www.539584.com-釉上彩瓷器值多少钱| www.006394.com-好彩香烟价格表| www.8717.loan-快三怎么追大小| www.zd85.com-彩票分析家app| www.778113.com-彩票app手机| www.gy7.cc-江苏快三多少组号码| www.74kt.com-体育彩票5位数| www.43866.cc-福彩快3停售时间| www.051174.com-3d通福彩下载安装| www.209926.com-500购彩大发快3| www.74495.com-七乐彩二等奖三等奖| www.713509.com-中彩那天课文作者| www.5409.cn-中福快三能赢钱吗| www.287227.com-足彩网上可以买吗| www.914033.com-ag彩票-| 大奖彩票www.11djcp.com| www.t47.bid-虎扑体育彩票算法| www.761370.com-延吉福彩中心地址| www.5596.com-快三开奖软件制作| www.32176.cc-体彩怎么买世界杯| www.96318.com-1999年中奖彩票| www.085357.com-红包彩票主播| www.173532.com-兰州快三走势图连线| www.251383.com-福利彩票网app| www.410083.com-七彩球灯笼-| www.880180.com-三d天天彩吧图库| www.go1.cc-快三夸度是什么意思| www.r79.club-彩选四-| www.020126.com-广州福彩中心| www.270698.com-85彩票app-| www.074737.com-彩6下载安装ios| www.564040.com-彩票快三是不是假的| www.678239.com-开体育彩票店申请书| www.531261.com-艾彩原创-| www.620404.com-世界彩票种类| www.698212.com-福彩报纸都有哪些| www.772667.com-时时彩概率漏洞| www.855332.com-什么彩票好中奖| www.922771.com-人人彩票娱乐| 百姓彩票www.bxcp3.com| www.786623.com-贵宾室彩票8848| www.864564.com-三d彩票八卦图| www.948779.com-福彩3的d走势图| www.4098.cn-珐琅彩瓷器出手| www.295123.com-下载贵州快三| www.gt26.com-彩票店赊账打快三| www.5468.net-彩38彩票网-| www.36pj.cc-七星彩一二位和尾| www.63113.com-河南结婚彩礼法规| www.106796.com-彩巴助手-| www.373009.com-快三助手手机助手| www.42qh.com-彩钢棚搭建方法| www.866813.com-博友彩下载-| www.kg00.com-手机投注彩票app| www.33356.com-彩迷推荐-| www.048747.com-福彩3d陈华杀尾| www.8725.pw-500彩票里的快三| www.614752.com-卖彩票的地方| www.713666.com-马云彩票33安卓版| www.811988.com-亮彩不锈钢汤锅| www.929027.com-感情彩票诈骗| JJ彩票www.647311.com| www.rk22.com-那个彩票网站反水高| www.33od.com-今日3d福彩谜语| www.22rx.com-福彩中奖假新闻| www.xa26.com-贵州省快三开奖结果| www.005257.com-9彩app下载-| www.984373.com-下载福彩彩宝网| www.pb73.com-河北燕赵福利彩票| www.75rg.com-网易竞彩足球预测| www.818916.com-彩票开奖有没有假| www.608805.com-赌博的派彩是什么啊| www.5sj.com-腾讯视频分分彩| www.1356.me-彩票算是一种赌博么| www.270323.com-九龙彩票-| www.32106.cc-易彩堂app怎么样| www.858255.com-网上买彩票都输钱吗| www.916938.com-3d彩铅画教程| www.983564.com-河南福彩兑奖时间| www.cp9518.com-中彩网是合法的吗| www.59kj.com-体育彩票七星彩定位| www.1816.com-合买彩票会被骗吗| www.628123.com-彩虹6号对配置要求| www.779772.com-福利彩票福彩3d诗| www.852042.com-体彩查询大乐透查询| www.914545.com-福龙彩票全民快三| www.970322.com-天天乐彩地址在哪里| www.00mm.com-七星彩报码图片| www.84dg.com-旭彩官方旗舰店| www.w01.net-搞笑彩票广告语| www.050530.com-彩票站怎么申请| www.134152.com-新版二四六好彩| www.631989.com-七彩虹官网-| www.215273.com-江西体彩官网| www.67rw.com-彩票站中奖去哪领| www.cp627.com-彩神iv下载-| www.093006.com-全天重庆彩计划飞鹰| www.2xg.com-完美彩票官网首页| www.95sb.com-欧洲杯足彩哪里买| www.34ie.com-彩吧图库蓝精灵| www.490.me-福彩3d彩票字谜| www.1095.cm-竞彩高手分享技术| www.976277.com-高价彩礼违法吗|