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天

知道了
9彩注册 www.79kp.com-天天抢红包彩票平台| www.990332.com-3d彩票软件有哪些| www.fy84.com-彩票带单老师的秘| www.875069.com-微信足彩群-| www.963588.cc-彩客网用户注册| 13e彩票www.817824.com| www.447365.com-安徵快三一定牛| www.639676.com-大通彩票路线| www.vd38.com-智慧彩票预测下载| www.667337.com-分分彩买两种稳赚| www.839888.com-正宗ig传统彩| www.981492.com-易彩彩票安全性如何| www.69dv.com-4d马来西亚彩票| www.117.me-彩虹的约定歌谱| www.846009.com-博纳彩票app下载| www.630978.com-彩运宝可信吗| www.723229.com-江苏彩票中奖| www.365272.cc-1分快三在哪里玩| www.238173.com-安徽快三最大遗漏值| www.2841.xyz-福彩3d包选几钱| www.8573.com-亿彩下载苹果版| www.021048.com-夺金三分彩计划| www.024415.com-时时彩任三组选玩法| www.160532.com-58彩票苹果版下载| www.308766.com-万彩吧高手预测| www.q01.site-湖南省福彩中心地图| www.2700.pw-v8彩票ios网址| www.95835.com-中国彩票的发行目的| www.96971.cc-体彩十三五规划获| www.6lv.com-彩票研究的原理| www.dg13.com-百宝彩官网-| www.6120.cn-加利福尼亚彩票| www.360182.com-网络黑彩怎样做代理| www.502526.com-亿彩是真是假| www.598441.com-七乐彩32期-| www.278892.com-2019互联网售彩| www.815234.com-竞彩团队骗局| www.14385.com-体彩周六开什么彩票| www.598765.com-海南七星彩资料4尾| www.728258.com-体彩排列5直播现场| www.817108.com-算出彩票的概率| www.895115.com-天津时时彩购彩大厅| www.981224.com-竞彩足球任九场| www.fv06.com-福彩pc蛋蛋-| www.64018.cc-足彩什么是深盘| www.070846.com-怎么考足彩分析师| www.142118.com-d8彩票-| www.257705.com-快三大全-| www.123451.com-开始导航路线彩票| www.234895.cc-双彩网-| www.317825.com-有人在玩融彩网吗| www.381482.com-中彩网开奖直播视频| www.482903.com-网络彩票中奖五百万| www.560217.com-斗鱼竞彩赢了没鱼丸| www.42439.cc-709彩票软件| www.96319.cc-订婚彩礼钱能退吗| www.092793.com-松原快三走世图| www.209538.com-彩票规律计算公式| www.283387.com-彩种大厅下载手机版| www.245288.com-易彩网怎么提现| www.189040.com-内蒙快三平台| www.156154.com-好彩堂跑狗图彩报| www.261972.com-龙彩彩票-| www.8912.loan-竞彩中5800万| www.17533.com-足球彩票收藏| www.800502.com-河南福彩快三太假| www.963163.com-竞彩网比分直| www.qa59.com-官方567彩票| www.870446.com-广东省福利彩票中心| www.975090.com-七星彩规律图表| www.jd2.com-龙的彩票-| www.ti04.com-上海福彩快三走势| www.66127.cc-怎样破解快三程序| www.28870.com-nba彩票ios-| www.894475.com-北京快三一天几期| www.218052.com-澳客体彩-| www.cai163.com-福彩5d开奖结果| www.751924.com-彩票12安卓版| www.0876.date-0008博彩论坛| www.995897.com-广东竞彩app下载| www.jz11.com-体彩七星彩游戏规则| 天下彩www.499680.com| www.16uq.com-k彩的邀请码多少| 500彩票www.324977.com| www.3050.biz-亚博彩票加盟条件| www.626297.com-彩66官方下载安装| www.02710.com-中国体彩软件| www.x30.com-谁有彩民群-| www.8679.xyz-七星体彩开奖号| www.173888.cc-福建快三中奖号码表| www.34ij.com-首充送彩金-| www.8499.top-93彩票网是真的吗| www.66936.cc-一注彩票提成多少| www.092986.com-彩票预测神器怎么样| www.mu96.com-中彩网首页走势图| www.229891.com-百盈快三走势图| www.678922.com-福彩201-| www.812679.com-福彩3d的研究思路| www.929320.com-福彩群英会app| www.r34.biz-时时彩提现套路| www.191695.com-809彩票-| www.6864.shop-海口体彩飞鱼地址| www.838302.com-成都彩钢围挡厂| www.967883.com-体彩6十1开奖号码| www.pq0.com-马来3分彩开奖号码| www.a50.cn-福彩3d奖金规则表| www.59uo.com-单张彩票投注上限| www.207988.com-99彩票app-| www.869353.com-3号彩票登录网址| www.fy56.com-8828彩票骗局| www.20mw.com-758彩票联系方式| www.181.red-彩票余数技巧| www.163063.com-福彩排列三试机号码| www.479480.com-中国新彩吧网开机号| www.530075.com-投彩是怎么玩的| www.579968.com-七星彩txt下载| www.680455.com-彩票中奖去哪领| www.751874.com-372彩票-| www.821308.com-福彩3d大兵鬼魂图| www.899812.com-快三有几种玩法| www.964970.com-新浪福彩开奖视频| 乐迎彩票www.691663.com| www.739137.com-宝马彩票向日葵团队| www.828363.com-龙之彩彩票平台| www.953527.com-竞彩258正规吗| www.cai9211.com河北快三官网下载| www.mu08.com-彩票121期走势图| www.40es.com-七星彩一注机选号码| www.1785.net-彩票行家com图库| www.410084.com-彩票大乐透的软件| www.538572.com-3d彩报今天-| www.677676.com-福利彩票公众号| www.777581.com-易盈彩票注册| www.861171.com-⑥和彩计划-| www.946631.com-内蒙福彩时时彩走势| www.cp644.com-人人彩票下载安装| www.182765.com-中国福彩怎么兑奖| www.292362.com-彩票查询app| www.360464.com-优彩区-| www.ay13.com-福彩江西快三| www.zy76.com-够力七星彩奖表规律| www.092877.com-彩钢围挡图片欣赏| www.73911.cc-杭州福彩十二选五| www.023666.com-6228彩票-| www.085358.com-时时彩定胆技巧| www.130333.cc-彩票查询大乐透最新| www.nb.cc-北京福彩-| www.60390.com-专业网络彩票| www.122619.com-彩神网投钱-| www.200616.com-易网彩票安装| www.380373.com-彩票每日首存| www.03964.com-彩票全能分析解码器| www.984735.com-快3彩票在哪买| www.pw20.com-珠江彩票是真是假| www.0958.cc-联众彩票网-| www.8080.in-搜索福彩独胆王| www.17570.com-足彩足球-| www.52452.com-陌陌好彩头-| www.63048.com-波叔竞彩最新消息| www.364215.com-放彩虹屁-| www.448992.com-麒麟彩票网会正规吗| www.531860.com-手绘彩铅唯美花鸟| www.194005.com-幸运快三精准计划网| www.285542.com-苹果手机购彩软件|