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.442660.com-足彩比分怎么看| www.984370.com-走势图彩宝网专业版| www.yz22.com-快三分分彩官网| www.444051.com-零三八彩票-| www.576462.com-汉中福彩吧-| www.745607.com-欢迎进入国民彩票| www.834409.com-日免好彩-| www.954823.com-瑞彩祥云8软件下载| 大赢家彩票平台www.119705.com| www.oe02.com-发彩送彩金-| www.33oj.com-福彩3d今天出什么| www.4863.cm-加微信推销彩票| www.15459.com-浙江福彩阳光征召| www.024349.com-充值一百抢红包彩票| www.111704.com-足彩职业玩家| www.255346.com-送28彩金彩票平台| www.344322.com-快钱彩票维护| www.941187.com-阿里彩票是阿里巴巴| www.cai2600.com北京快三开奖走势| www.zf58.com-58彩票下载网址| www.yp7.cc-彩神网-| www.5zi.cc-牛牛彩票骗局| www.271.date-美国彩票强力球9| www.4694.vip-七彩虹c3-| www.25345.com-彩铅技法有哪些| www.85255.com-奖聊出品彩票走势图| www.099361.com-最新彩票中奖新闻| www.176752.com-什么叫快三倍投| www.288911.com-彩票回补几率负数| www.369668.com-999彩票网靠谱吗| www.507256.com-彩神争霸网页登录| www.65164.com-世界杯竞彩比分| www.097763.com-微信有人带你玩快三| www.129088.com-七乐彩奖池余额为0| www.234620.com-网上还可以买彩票吗| www.331607.com-福利彩大发快三计划| www.420111.com-955彩票手机版| www.561537.com-31彩票走势图大全| www.655662.com-今日天开1彩票中奖| www.820670.com-足彩必发凯利500| www.56488.com-中堂彩今晚开什么| www.126759.com-菠萝彩论坛区| www.vl56.com-中国体彩票开奖公告| www.223928.com-快三怎么猜一个好| www.329175.com-重庆时彩网-| www.420208.com-彩票投资指南报| www.524214.com-天气网首页福彩| www.832061.com-093彩票技巧| www.901611.com-中国福利彩票游戏机| www.967348.com-网络黑彩破案困难吗| www.cai8801.com大发快三怎么买能赢| www.72424.cc-青岛快三查询| www.055720.com-七乐彩选号最准公式| www.133377.com-大西南彩钢-| www.221024.com-最新彩神争8软件| www.303209.com-优乐彩票网投| www.379568.com-网上指导员彩票| www.492628.com-王者彩票357| www.567951.com-迅赢彩票-| www.670876.com-查全国彩票开奖查询| www.746711.com-燕赵福彩网排列五| www.44285.com-全民乐彩票登录| www.254054.com-湖快三走式图一定牛| www.381608.com-昨天福利彩票开奖| www.00685.com-中国体育彩票申请书| www.21751.cc-体彩组三直选遗漏| www.009045.com-黑客更改彩票余额| www.330757.com-彩票追号计划公式| www.06798.com-福彩蓝精灵21| www.67030.cc-7彩颜色-| www.qk76.com-中原彩票大厅| www.32pz.cc-掌上彩票可信吗| www.640.tv-买黑彩报警有用吗| www.4492.cn-竞彩足球新浪| www.9650.loan-合肥福利彩票刮刮奖| www.39799.cc-彩虹8下载安装| www.06343.com-棒棒彩票-| www.66545.cc-福彩直播视频| www.028722.com-盛彩app-| www.974791.com-彩民彩票中大奖| www.80yh.cc-彩票代投骗局| www.4115.biz-彩虹6号ipad| www.07475.com-下载五百彩票网| www.60030.cc-u9彩票官网-| www.078040.com-猜冠军彩票是骗局吗| www.164618.com-聚享彩票是真的假的| www.251268.com-彩票之家app下载| www.447961.com-vr彩票计划网页版| www.542668.com-竞彩网站-| www.607700.com-福建体彩36走势图| www.678500.cc-彩之网首-| www.756253.com-实体彩票店会吃票吗| www.826250.com-网上彩票何时恢复| www.890069.com-nba体育彩票| www.949085.com-彩皇网计划-| www.988117.com-掌上赢彩-| www.aq61.com-遵义市福彩中心| www.xe54.com-七彩彩票是不是骗局| www.41oh.com-澳洲三分彩规则| www.823.live-彩票在哪买-| www.5385.pw-初买彩票的方法| www.14766.com-全民中彩票网骗局| www.68121.cc-赌体彩足球-| www.128988.com-体彩大乐透的规律| www.220225.com-腾讯彩票pc28| www.292821.com-福彩快3中奖| www.351775.com-期期中彩票资讯网| www.412910.com-澳门银河彩票app| www.517666.com-新胜彩票-| www.579958.com-七星彩明月珰txt| www.654311.com-i8彩票登录-| www.748639.com-至尊彩数字邀请码| www.813277.com-跟群玩彩票-| www.877900.com-彩迷的意思-| www.972832.com-日彩网是真的吗| www.353573.com-彩票14-| www.460051.com-凤凰iii彩票| www.539946.com-时时彩前三跨度技巧| www.617103.com-体彩排三专家推荐号| www.678572.com-下载彩之网首页| www.736749.com-2018玩彩平台| www.798571.com-体彩投注站查询| www.858225.com-彩票输太多-| www.910304.com-口袋彩票下载| www.960534.com-快三和值技巧教程| www.998862.com-彩乐汇官方下载| www.ga5.com-7星彩怎么才算中奖| www.934934.com-彩票苹果版下载| www.984539.com-福彩3d小小鱼图谜| www.yd2.com-大发快三怎样压和值| www.uy53.com-河南福彩赛马走势图| www.17rh.com-七乐彩号码预测专家| www.2080.pro-江苏体彩预测| www.8291.xyz-手机港彩网投论坛| www.43144.com-福彩山的字迷| www.125425.com-彩票软件销售合法| www.211250.com-中国福彩湖南快三| www.294873.com-重庆英皇快三查询| www.020592.com-七星彩解梦册查码王| www.109981.com-足彩加官网下载| www.208129.com-网上投注快三违法吗| www.268536.com-体彩助手电脑版| www.331044.com-彩神争霸-| www.387000.cc-足彩总进球数技巧| www.513291.com-微信如何购彩票| www.573035.com-秦淮灯彩-| www.630655.com-网上购彩官方网站| www.680281.com-网易彩票中奖不承认| www.742338.com-亿游彩票app| www.798860.com-彩运8平台下载| www.855109.com-快速查体彩开奖结果| www.905362.com-分析足彩收费违法吗| www.954341.com-彩28彩票下载安装| www.988123.cc-百万彩票是不是真的| www.cai8733.com北京的十一选五体彩| www.hp19.com-好彩客最新版本| www.vj25.com-手机网易彩票合法吗| www.11yx.com-吉林省快三贴吧| www.195516.com-乐彩论坛17500| www.392533.com-搜抓彩票-| www.491077.com-刮刮乐彩票图片| www.551335.com-贵州快三开奖助手| www.1939.top-双彩论坛晚间字谜| www.6403.cc-雅迪迷彩48-|