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天

知道了
1分快三 www.803579.com-彩圣网1-| www.cp2035.com-幸运快三网-| www.881843.com-唰福彩-| www.959837.com-体彩亿元大奖一览表| 天下彩www.508680.com| www.ib57.com-福彩三d复式投注表| www.0527.top-今天福彩排三开奖号| www.9yh.com-福利彩票几点不能买| www.352270.com-网易彩票提现流水| www.189477.com-玩时时彩怎么稳赚| www.jd11.com-快三跨度开奖结果| www.9972.top-进口彩妆品牌| www.135104.com-计划彩票聊天室| www.2398.cn-青蛙彩网站-| www.642629.com-七乐彩开奖号几注| www.409383.com-体彩怎么买七星彩| www.14422.cc-虚拟足球e球彩体彩| www.354388.com-福彩东北彩吧3| www.581877.com-凤凰彩票真假| www.731515.com-广东福彩精彩十分| www.858944.com-彩票历史查询器工具| www.982323.com-日本彩票广告| www.ka45.com-新3d彩票计划骗局| www.585630.com-国外彩票代购| www.33qt.com-go彩是什么意思| www.477555.com-彩神通网址多少| www.9339.pw-趣味彩球游戏| www.994247.com-彩票分析大师官方| www.15ah.com-彩票中奖下载| www.1362.in-彩票288-| www.14548.com-辽宁体彩全运彩| www.6525.biz-福彩小小鱼字谜| www.771372.com-五分彩官方首页| www.237499.com-微微彩票-| www.ce62.com-幸运快三怎么下载| www.x35.club-时时彩微信交流群| www.74qt.com-大掌柜彩票系统维护| www.mf21.com-好彩网江苏快三| www.51pz.com-足彩米字什么意思| www.2512.top-51彩虹空间登录| www.23393.cc-时时彩中奖助手| www.83448.com-竞彩让平有哪些特点| www.055446.com-吉林快三五天走势图| www.138271.com-双色球彩妹独栏唯彩| www.228353.com-南阳市彩礼钱| www.7833.loan-彩票大发玩法| www.655250.com-易利三分彩全天计划| www.623456.cc-3d福彩论坛杀尾| www.715897.com-3d杨大侠彩乐乐| www.md78.com-快三倍投技巧| www.mf36.com-天津福彩十分开奖| www.2nf.cc-彩票输-| www.822156.com-2805c0m彩票| www.cai6600.com吉林省的彩票快三| www.967173.com-彩吧助手带线走势图| www.61iq.com-网上投资彩票赚钱吗| www.92953.com-岩棉彩钢板工厂| www.59qs.com-七星彩梦册查马| www.029268.com-九州彩票大发快三| www.131929.com-彩礼超2万-| www.230969.com-三地彩吧助手| www.980153.com-彩票店的账目管理| www.ky96.com-福彩3d输了几万| www.664088.com-cba篮彩推荐| www.27th.com-马来西亚中国人福彩| www.06297.com-3d彩字谜图谜| www.588723.com-今晚的七星彩开什么| www.345274.com-彩神ii联系电话| www.806465.com-彩票模拟-| www.874371.com-全天时时彩实时计划| www.948883.com-武汉福彩转让| 同乐彩票www.tlcp7.com| www.066556.com-亚洲慱彩app| www.797623.com-九九购十分彩| www.55498.com-浙江11选五爱乐彩| www.913162.com-彩客竞彩彩票| www.74ii.com-彩宝安卓版下载| www.079052.com-一分快三看大小| www.257961.com-038彩票最新版本| www.331379.com-乐彩vip大发| www.409904.com-腾讯彩票走势图大全| www.522804.com-2元胜负彩500万| www.628200.com-新浪体彩直播视频| www.952440.com-k彩福地网站| www.kf41.com-一分快三官网开奖| www.416397.com-东贝彩虹冰淇淋机| www.159300.com-海南福彩快2代理| www.366146.com-92彩票网-| www.553130.com-收米彩-| www.637997.com-买彩票是骗人的吗| www.783638.com-什么是非法彩票| www.914866.com-彩神不让提现| www.978474.com-皇都彩票用户登录| www.ap29.com-福彩北京快三走势图| www.kz15.com-福利彩票和体育彩票| www.660.in-时时彩开奖网易| www.77823.com-福彩3d七乐彩| www.1125.pw-竞彩怎样领奖| www.889210.com-易彩堂注册邀请码| www.209398.com-app人人中彩票| www.629769.com-七彩视界app官网| www.527611.com-时时彩跨度图| www.596791.com-快三土豪计划| www.669802.com-为什么调整彩票规则| www.735252.cc-福利彩票新手入门| www.885977.com-彩虹的约定儿歌| 大赢家彩票网www.178167.com| www.bn83.com-11选五购彩-| www.wq52.com-好彩票网页版| www.4161.top-七彩云乳业有限公司| 500彩票网www.310615.com| www.964092.com-168彩票账号| www.293485.com-河南福彩网开奖结果| www.376193.com-彩宝广告图片| www.00fb.com-一年级彩虹课文| www.509665.com-彩汪汪-| www.783378.com-七乐彩奇偶分布图| www.850366.com-国外彩票怎么开奖| www.916856.com-香港十分彩的网站| www.970941.com-福彩快三被黑| 500彩票www.401271.com| www.917676.com-彩票漏洞改数据| www.321498.com-明发彩票下载| www.105242.com-超级时时彩缩水手机| www.274516.com-拉人玩快三犯法吗| www.629525.com-幸运彩票有没有规律| www.tc6.com-体彩排列五开奖现场| www.027585.com-快三彩票平台可信吗| www.980765.com-武汉福彩店转让| www.sm1.cc-甘肃福彩时时彩规则| www.rr00.com-国内正规彩票平台| www.lc80.cc-怎么做彩票庄家| www.369745.com-博中彩票网址| www.8349.loan-两分钟一开的彩票| www.583884.com-彩票88官方网站| www.645362.com-买足彩心得-| www.699167.com-休彩大乐透机造号码| www.760963.com-福彩双色球中奖省份| www.289425.com-5分彩开奖号码| www.028493.com-百胜快三是不是黑彩| www.149861.com-彩票精准分析软件| www.290829.com-内蒙古快三转家预测| www.387372.com-怎么破解网投彩票| www.26qj.com-家彩开奖专门提| www.7803.biz-买足彩心得-| www.34859.com-福彩三d彩报三版| www.75168.cc-福彩类-| www.035898.com-最幽默的彩票广告语| www.011070.com-福建体彩投注app| www.097379.com-彩票公益资金分配流| www.46fv.com-快彩乐老十一选五| www.573006.com-天下彩彩图诗句玄机| www.647755.com-好彩运租车公司电话| www.714698.com-景德镇体彩中心招聘| www.790692.com-彩票随机选号| www.860088.com-5050彩票下载| www.908710.com-最新彩票开奖号码| www.969133.com-网易彩票资讯首互| www.cp1120.com-快三免费计划网页| www.mt38.com-彩红时时彩计划软件| www.339956.com-彩票中奖整人短信| www.48239.com-篮彩app哪个好| www.11458.com-世界几大博彩公司| www.7358.shop-上海体彩站点电话|