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.9055.wang-农行福彩306定投| www.801053.com-皇都彩票怎么样| www.893323.com-彩票高级过滤| www.968486.com-彩民论坛网-| www.cai0101.com快三的对子全包玩法| www.796801.com-完美网彩票下载安装| www.886723.com-中国福彩是骗局吗| www.966275.com-双数开彩是什么数字| 幸运彩票www.669307.com| www.171498.com-上海快三开奖情况| www.332866.com-新浪足球彩票开奖| www.438991.com-长沙福彩兑奖地址| www.536404.com-彩票都有什么类型| www.512958.com-盛丰彩票-| www.597872.com-足彩查询中奖查询| www.683089.com-彩票矩阵缩水| www.764503.com-500万彩票电脑阪| www.853869.com-益博彩票-| www.925573.com-彩富网最快-| 彩天下www.c2398.com| www.567770.com-胜负彩对阵-| www.5310.cn-南国七彩星彩论坛| www.75793.com-彩票盈利投注技巧| www.695527.com-竞彩足彩360| www.5915.me-买彩票容易中奖的人| www.055201.com-快三黑彩举报电话| www.365402.cc-新启旺彩票-| www.586238.com-七乐彩网易杀号定胆| www.748977.com-查彩票网-| www.ia61.com-彩票容错什么意思| www.2335.cm-澳门博彩短信广告词| www.52314.com-彩票女什么意思| www.222040.com-678彩票-| www.2969.loan-金祥彩票网址导航| www.2757.net-杭州市福利彩票| www.322074.com-九宫图与彩票| www.982547.com-福彩公益行头奖好假| www.yk45.com-i江苏快三开奖结果| www.603489.com-山西福利彩票中心| www.751404.com-彩票聋哑人多少钱| www.012338.com-北京快三作弊码| www.52333.com-好彩跟老师翻倍投| www.213353.com-彩神x软件-| www.519157.com-三d预测彩吧论坛| www.695062.com-周二篮球竞彩结果| www.4003.vip-澳门彩票自拍| www.121711.com-时时彩报案-| www.cai4011.com贵州快三网站| www.554116.com-世博大熊猫彩色银条| www.730342.com-易彩趋势-| www.983119.com-上海快三开结果| www.743270.com-酷彩竞彩足球| www.756536.com-云南体彩快乐十分钟| www.50283.com-新宝gg彩票| www.410381.com-爱尔兰彩票官网| www.765424.com-彩票对打反水| www.077049.com-诚信彩app-| www.837989.com-彩羽红葡萄酒怎么样| www.15xf.com-彩虹5无人机图片| www.258606.com-足彩胜负平规则| www.144736.com-淘宝快三基本走势图| www.190009.com-快三彩票怎么玩黑红| www.x88.bid-酷玩手游彩票合法| www.340106.com-19036足彩分析| www.0321.wang-如何分析彩票和值| www.491382.com-华为荣耀6x彩膜| www.0630.cn-彩票合买源码哪些| www.337057.com-下载买彩票软件| www.678213.com-体育彩票中奖高| www.148683.com-时时彩为什么赢不了| www.20tq.com-体彩样票有什么用| www.699183.com-华夏彩票怎么赢| www.0163.net-中国国彩-| www.267638.com-彩票分析师资格证| www.296606.com-福彩三地开奖号| www.750988.com-中福彩票5分时时彩| www.883041.com-彩投帅哥骗局图集| www.699442.com-七彩乐怎么玩| www.771609.com-中国竞彩网点分布| www.up04.com-分分快三是什么彩票| www.362162.cc-天空出现彩虹写句子| www.092076.com-生日号码买彩票行吗| www.552298.com-彩票三b字谜| www.cg84.com-伯爵彩票app| www.478776.com-所有福彩网站大全| www.055883.com-体育彩票8位数| www.98yb.com-彩22大发快3下载| --手机彩膜批发| www.167783.com-福彩快三走势图今天| www.042644.com-甘肃快三群-| www.315863.com-彩虹5无人机出口| www.980847.com-金彩网彩票资料| www.084745.com-彩之网实时统计| www.998314.com-彩票天天乐是否正规| www.978483.com-生肖天天好彩1| www.246964.com-360体彩网-| www.579906.com-福利彩票开-| www.952943.com-竞彩足球胜平负分析| www.8414.cc-爱彩乐11选5旧版| www.789375.com-广东竞彩app| www.49bj.com-幸运十分彩走势| www.874615.com-湖北体彩兑奖地址| www.984396.com-安徵快三时时彩技巧| www.334546.com-彩票提现账户异常| www.ie62.com-手机买彩票靠谱吗| www.371140.com-体育七星彩直播现场| www.04179.com-彩票看中几等奖| www.936256.com-苏州体育彩票网站| www.52396.cc-玩彩票怎样发展下线| www.152801.com-福彩121-| www.542588.com-时时彩长龙提醒| www.7423.cn-体育彩票站申请电话| www.65818.cc-彩票选号在线| www.90eu.com-七星彩册子论坛| www.11ri.com-500公司彩票网| www.109687.com-腾讯分分彩挂机论坛| www.302761.com-70彩票app-| www.008752.com-竞彩最新开奖| www.633070.com-追号计划快三| www.803044.com-彩票手机购买| www.60yb.com-快三定胆公式| www.530036.com-时时彩提现可靠吗| www.2452.cc-双彩网3d字谜汇总| www.151250.com-福彩3d彩报银海| www.832465.com-七彩视界官网页面| www.3283.cn-凤凰彩票没人查吗| www.558432.com-234天天彩-| www.843103.com-彩票站点缴纳社保| www.5546.cm-体彩大乐透选号神器| www.168962.com-内蒙古快三网站| www.307152.com-手机淘宝怎么买彩票| www.500058.com-数学彩票-| www.65228.cc-福彩双色球预测总汇| www.375697.com-彩金宏辉分析仪| www.754.mobi-上海快3彩票投注站| www.293033.com-3d彩吧图彩字迷| www.888280.com-怎样辨别彩票的真伪| www.050747.com-十一选五黑彩骗局| www.vb50.com-彩票平台哪些赔率高| www.821597.com-济南福彩体彩站转让| www.56zs.com-今日体彩p3报纸| www.413121.com-网易理财中华彩| www.958006.com-彩99平台下载| www.811225.com-廊坊哪些彩票站招聘| www.6492.vip-5g彩票网-| www.92294.com-利彩彩票下载安装| www.iy52.com-嘉兴体育彩票| www.657.me-特彩吧报码-| www.2538.shop-彩灯和灯彩-| www.022872.com-环球彩票是正规的嘛| www.364558.com-e球彩总进球数规则| www.843563.com-中国福利彩票规矩| www.305287.com-七星彩历史开奖数据| www.826708.com-信达国际彩票| www.54701.com-青岛体彩中心| www.538317.com-h8彩票-| www.085003.com-快三选号软件| www.630602.com-3d东盛彩报4| www.055.date-福彩东方6十1开奖| www.26121.cc-羽泉彩虹mv-| www.668577.com-华人时时彩票| www.101644.com-红彩网邀请码在哪里| www.476632.com-六福在线彩票| www.979352.com-香港好彩四味爆珠|