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天

知道了
彩01彩票 www.01600.cc-鳯凰竟彩-| www.947669.com-中国彩票作假| www.rf33.com-中国体育彩票帷胜| www.981343.com-易彩娱乐二维码| www.cb84.com-288彩票平台下载| www.xw88.com-彩票赠送现金| www.29736.cc-96福彩-| www.998227.com-七星彩版区头中王| www.4747.gg-伪造彩票-| www.136426.com-1分钟一开的彩票| www.498697.com-佰万亿彩票-| www.070.org-哪里下载山东云彩宝| www.2747.org-彩票试机开奖| www.384443.com-彩票的社会意义| www.551533.com-福彩快乐彩概率| www.703078.com-足球彩票兑奖计算器| www.792163.com-福彩中心领奖地址| www.870743.com-必发彩票开奖直播网| www.989914.com-彩漂液的作用| www.by27.com-体彩竞彩-| www.zz98.com-够力七星彩-| www.977241.com-濮阳结婚彩礼多少钱| www.al61.com-七星彩出号绝密算法| www.881336.com-澳門博彩-| www.960060.com-快三如何避免长龙| www.cai3511.com快三屠龙技巧| www.568502.com-体彩排三断组分解| www.21dj.com-keystr彩票-| www.348511.com-乐彩网官方平台| www.5989.site-必中彩票网提现| 乐彩www.435050.com| www.113552.com-四川竞彩快三| www.008796.com-彩票源码网-| www.83265.com-彩票平刷原理| www.072072.cc-网上买彩票靠不靠谱| www.180167.com-易彩快三软件| www.313224.com-外围彩票网站哪个好| www.023502.com-3d福彩魔鬼图表| www.66562.cc-最稳定的时时彩平台| www.041224.com-澳洲彩票玩法| www.135577.com-搜索福彩三地| www.9507.org-彩票工具_今日运势| www.26312.cc-彩吧是什么意思| www.285952.com-亚洲彩票官方网| www.366543.com-荷花怎么用彩铅上色| www.483568.com-信彩计划网-| www.571981.com-荆州彩票中奖名单| www.7498.com-自助售彩终端机| www.710387.com-湖北快三计划范哥| www.185342.com-福彩pc到底是什么| www.45036.com-天天彩票平台靠谱吗| www.155915.com-好彩网可信吗| www.672909.com-快三开奖结果爱乐彩| www.133741.com-广西体彩网网页版| www.332207.com-鸿运彩票-| www.789399.com-彩票中奖顺口溜| www.900591.com-彩吧图库第一版应用| www.981451.com-彩票返点数啥意思| www.661713.com-竞彩8串1真难中| www.180227.com-江苏快三一定牛推荐| www.002318.com-墨西哥快三开奖结果| www.465250.com-三十六计赢足彩文库| www.621969.com-5福彩票网下载| www.514488.com-3d黑苍蝇彩报| www.9409.net-西哈努克港博彩上班| www.048101.com-买彩精英专家| www.27329.com-最大快三平台| www.740097.com-澳彩客户端-| www.860557.com-外围彩票网站大全| www.957659.com-皇帝彩票网站app| 99福彩www.259989.com| www.068968.com-苏州福彩快3走势图| www.163998.com-彩票刷大底-| www.600768.com-一张彩票可以买几注| www.466332.com-北京足彩单场开奖| www.5682.cn-福彩3d杀两码组合| www.169149.com-福彩湖北快三开奖| www.mc4.cc-快三走势图怎样看| www.19222.cc-体育彩票在哪兑奖| www.477858.com-哪些银行积分买彩票| www.696957.com-受注赛程竞彩足球| www.084033.com-正规彩票网有哪些| www.9565.org-体彩高频彩直播| www.903525.com-星光彩票注册邀请码| www.5094.biz-福利彩票几点截止| www.984046.com-关注老猫看彩平台| www.28km.com-天玺彩票在哪里买| www.516126.com-彩票狂人王成周近况| www.616741.com-银达时时彩登录网址| www.520571.com-手机500万彩票网| www.700818.com-首充送彩金套利| www.780071.com-足彩预测最准的网站| www.844466.com-福彩都包括什么| www.895608.com-大中华彩票苹果版本| www.972883.com-凤彩网杀号-| www.zk3.cc-广西快三技巧公式| www.xw44.com-做梦买彩票中奖| www.sg72.com-时时彩是正规官网| www.10uh.com-中彩网中彩-| www.083858.com-女孩玩彩票是下套么| www.171181.com-河北快三遗漏表| www.yb36.com-新彊福利彩票| www.004252.com-博彩黑粉-| www.798295.com-海南彩票天涯社区| www.875348.com-博彩杀猪盘-| www.683955.com-体彩实体店的软件| www.773440.com-送彩金的跑得快| www.tj11.com-广西快三预测软件| www.14gx.com-中国体彩在线培训| www.1248.win-彩票999软件| www.401377.com-百万彩票方言下载| www.192342.com-福彩天地报纸| www.667128.com-精选论坛特区彩票网| www.734744.com-怎样算福彩公式| www.800453.com-卓易彩票官方下载| www.872628.com-256.cm彩票-| www.955557.com-彩票挂机方案贴吧| www.999965.com-腾讯十分彩开奖软件| www.fl99.com-手机体彩-| www.up97.com-幸运快三5分钟一次| www.09gd.com-旧彩77app-| www.63zp.com-众彩网是能赚钱么| www.1112.me-足彩五串一错一场| www.5721.top-福彩有多少种| www.444041.com-富贵彩票下载安装| www.569931.com-褔利彩票双色球开奖| www.521087.com-体彩交流群-| www.060590.com-全天时时彩计划网| www.0240.in-今天东盛彩报| www.04nu.com-儿童彩铅主题画| www.10ho.com-网冠彩3dd-| www.384.in-安徽好彩开奖结果| www.3211.space-yy彩票登录网页版| www.078929.com-体星彩7开奖结果| www.164064.cc-蒂之彩微整形怎么样| www.263107.com-体彩大乐透图表| www.58055.cc-官方彩网-| www.8222.cm-澳门有哪些彩票发行| www.59993.com-七星彩今晚开什| www.062477.com-福彩3d图迷yin| www.127016.com-彩铅画景图片| www.222657.com-内蒙古三快三推荐| www.8874.org-足彩8串1开奖查询| www.58948.com-江苏快三怎样看走势| www.285767.com-做彩票平台-| www.451008.com-彩票欠账打官司| www.579432.com-类似于七星彩的古言| www.679019.com-糖果派对赠送彩金| www.794128.com-九州彩票真能赚钱吗| www.919323.com-免费搭建彩票| 500彩票www.530477.com| www.21ke.cc-彩票数据爬取| www.6080.live-釉上彩怎么画视频| www.626891.com-福利彩票价格| www.835088.com-好彩红跟蓝哪个好抽| www.660390.com-分分彩人工计划网| www.543441.com-庭审现场彩票王视频| www.692502.com-6678彩票怎么样| www.1980.date-18彩票网首页| www.40786.com-彩票辅助系统| www.268544.com-湖南福利彩票开奖| www.318504.com-全天重庆彩万位| www.9tt.com-七星彩奖教-| www.883222.com-鸿彩彩票app|