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.205983.com-五分彩稳赚公式| www.255585.com-七星彩中奖号查询| www.731893.com-百姓彩票可信吗| www.eb59.com-彩票500网-| www.8302.vip-易彩怎么玩-| www.502873.com-福利彩票开将记录| www.947744.com-b爱彩乐-| www.444743.com-双色球松江彩民中奖| www.852313.com-怎么看彩票11选5| www.12633.com-今日3d彩票字谜| www.253460.com-好彩妹石敢当的手| www.la99.com-新星彩免费中彩| www.q10.in-传统彩平台-| www.3og.com-世纪彩城-| www.509646.com-彩票头奖13亿元| www.76ho.com-彩票站造假-| www.356760.com-彩票怎么宣传| www.902137.com-玩黑彩给立案吗| 万利www.32123i.com| www.89by.cc-做梦梦见数字买彩票| www.961563.com-中五百万的彩票| www.yt75.com-奇门测彩票-| www.4713.top-体彩中国红中奖规则| www.78575.cc-双彩到上虞多少公里| www.316714.com-快三最大的漏洞广西| www.480738.com-喝彩中华第三季| www.838151.com-彩钢围挡施工价格| www.730276.com-鄂尔多斯福彩中心| 大赢家彩票平台www.702392.com| www.36qs.com-彩百万娱乐app| www.234304.com-有手机软件买彩票吗| www.191777.com-五快三走势图带连线| www.039.hk-k彩平台客户端下载| www.450883.com-彩8正版下载安装| www.740188.com-体彩和福彩买哪个好| www.090789.com-买彩票中5元| www.5156.net-七星彩第杀号专家| www.379971.com-彩票私盘违法| www.982687.com-彩票11选5上海| www.64on.com-七星彩直播开奖| www.615829.com-福彩3d排列5| www.890496.com-彩68安全吗-| 汇彩网www.hcw266.com| www.jk67.com-1305彩票骗局| www.877945.com-彩迷8计划客户端| www.005142.com-彩芽的好奇全集心| www.5827.xyz-开彩票店找哪个部门| www.82844.cc-新浪竞彩投注| www.cai5755.com福彩三d走势| www.8ki.cc-豪哥足彩篮彩| www.7189.vip-七彩阳光动作视频| www.062482.com-可以买彩票的网站| www.of83.com-福利彩票预测官方网| www.676693.com-七星彩票今日开奖| www.696684.com-竞彩网唯彩-| www.1453.vip-彩票33软件下载| www.9131.biz-星空彩票网-| www.778028.com-汇彩网网址多少| www.44gd.com-深圳彩之云-| www.652765.com-体育彩票排列七| www.666120.com-福彩双色球最新预测| www.804235.com-网上购买体彩| www.954203.com-今晚七星彩开什么号| www.895608.com-大中华彩票苹果版本| www.69615.cc-易彩乐邀请码| www.999932.cc-大乐透彩民村| www.279313.com-没人在黑彩赢过钱吗| www.507586.com-市福彩中心地址| www.717020.com-简单小清新彩铅画| www.930843.com-足彩串中奖规则| www.301435.com-彩鸿彩票有问题吗| www.266257.com-内蒙古快三跨度振| www.985034.com-nba竞彩篮球预测| www.763386.com-收米竞彩app| www.931558.com-福建31彩票走势图| www.005432.com-高频彩拉人-| www.121451.com-588彩票网官方| www.016542.com-足彩分析师招聘| www.70ln.com-安徽快三列表| www.4713.net-易彩团队是真的吗| www.65929.com-今晚福彩3中奖名单| www.061805.com-福利彩票复式| www.212117.com-广西快三一共多少期| www.373163.com-3d彩票定胆杀号| www.584243.com-好彩票网站多少| www.do6.com-湖北快三一定牛走势| www.77334.com-高效办理的彩票网站| www.470240.com-海外代购彩票| www.959405.com-彩66官网-| www.01018.com-精英彩票论坛| www.443898.com-体育彩票直播频道| www.7542.cc-江苏竞彩店申请| www.376386.com-手机彩票评测网| www.475575.com-彩票汇手机版下载| www.683292.com-彩票超级缩水软件| www.883017.com-80彩票犯法吗| 天天彩票www.2373c.com| www.127161.com-彩铅画人物古风简单| www.728168.com-重庆时时彩测号| www.890085.com-至尊大发快三| 购彩网www.76gcw.com| www.73ks.com-体彩5d10玩法| www.6667.org-上海褔彩11选5| www.037072.com-125彩票下载| www.221597.com-彩票破解软件靠谱吗| www.360630.com-江苏快三有多少期| www.248532.com-福彩三字图谜总汇| www.64ui.com-福利彩票2d不定位| www.5070.cc-世界杯买不了足彩| www.28099.cc-7168彩票手机版| www.95735.com-遵义体彩领奖地址| www.oi81.com-福彩中奖号码查询| www.15lp.com-17彩票安全吗| www.97mv.com-福利彩票3b试机号| www.6314.biz-钻石彩票违法吗| www.29839.cc-体彩现场直播视频| www.86488.cc-湖南体育彩票开奖| www.707867.com-彩票签到有钱| www.33se.cc-大胖彩票-| www.362337.com-彩虹改成比喻句| www.8344.com-够为七星彩小辣椒| www.346937.com-彩虹是什么梗| www.03ml.com-快三什么时候加奖| www.230778.com-如何解决彩票风控| www.px38.com-下载老彩民app| www.356245.com-分分彩助赢软件网址| www.854231.com-时时彩8码复式倍投| www.115647.com-大发彩票开奖记录| www.94640.com-凤凰网竞彩推荐| www.060366.com-黑彩怎么办-| www.206151.com-078网络彩票骗局| www.306445.com-网赌彩票买大就输| www.390266.cc-panda彩票-| www.pk59.cc-3d牛彩图库图| www.770889.com-图片彩票-| www.74wk.com-95彩票技巧-| www.847116.com-大奖网彩票安全吗| www.444809.com-nba篮彩官网| www.874537.com-安装吉林快三| www.123680.com-彩之网绕胆图| www.571861.com-新盈彩下载-| www.41wo.com-幸运彩票输了好几万| www.411538.com-牛彩网3d精准杀号| www.836066.com-西宁体彩中奖| www.276927.com-黑彩怎么控制开奖| www.464554.com-幸运五分彩真的假的| www.585062.com-好彩酒楼江北店| www.832270.com-下载龙凤彩票| www.956143.com-速盈彩票平台怎么样| www.yl91.cc-大乐购彩票开奖| www.225980.com-酷发财彩票走势图| www.299385.com-快彩快3助手| www.386122.com-奇门彩票预测秘笈| www.484040.com-最大黑彩案件| www.543194.com-福彩大家乐第九季| www.621302.com-快三分分彩下载| www.n13.net-彩票数学挑选算法| www.235921.com-足彩竞彩-| www.205499.com-5分快三官方开奖| www.25599.cc-彩票断组什么意思| www.009573.com-手机彩膜图片| www.114767.com-旺旺彩票店-| www.188983.com-福彩3d首页-| www.110945.com-彩吧图库3d连线|