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.5582.vip-幸运飞艇官网彩票| www.167327.com-今天快三开奖号| www.431.in-河北快三怎么看大小| www.165271.com-彩票刷佣金-| www.279078.com-快三机选号码查询| www.800863.com-彩猫彩票app| www.903216.com-彩票开奖号码双色球| www.998869.com-体彩19052期| www.el05.com-广西快三赔率表| www.16dy.cc-山东体彩申请| www.256621.com-彩经网彩票走势图| www.3yv.cc-彩票大奖多少人中了| www.14655.cc-体育彩票国庆放假吗| 福利彩票www.8039x.com| www.gx91.com-最新的彩票软件大全| www.zp89.com-彩票福彩还是体彩| www.933615.com-彩票正规预测网站| 双赢彩票www.sytg6.com| www.379411.com-足彩分析网易推荐| www.514488.com-3d黑苍蝇彩报| www.599205.com-彩票双色球该怎么买| www.677349.com-快三吉林长春天气| www.781045.com-下载江西快三助手| www.239663.com-大发快三开奖记录| www.1726.vip-开户送彩金-| www.684103.com-竞彩比分三串一牛人| www.310550.com-山东体彩排列三专区| www.426813.com-职业彩民心得故事| www.794477.com-彩票网络平台大全| www.28066.com-阿里彩票是什么网址| www.007935.com-双色球网易彩票网| www.107037.com-澳洲五分彩存在吗| www.042654.com-福彩广告词怎么写| www.166712.com-快三在线稳定计划| www.133019.com-开彩票店选址技巧| www.298927.com-彩神争霸8吉林| www.372689.com-今天福彩3d奖号| www.490556.com-我要中奖大师彩票| www.956505.com-顶级彩票-| www.db55.com-秒速时时彩开奖图| www.14dz.com-福彩算号-| www.h36.top-澳门5分彩开奖图| www.567390.com-彩虹6号第3年季票| www.697635.com-体育彩票放假时间表| www.782253.com-彩票软件网-| www.859383.com-河北省福彩中心电话| www.641427.com-体彩logoppt| www.728561.com-高频彩是骗局| www.802048.com-福利彩票第38期| www.877033.com-彩票检测-| www.969134.com-彩票公益金项目| www.cp4.cn-贵州彩票中心| www.mr46.com-快乐彩票时时彩| www.09su.com-万豪最近体彩销售点| www.44021.com-凤凰彩票时时彩计划| www.359393.com-七星彩打什么奖好| www.456662.com-668彩票软件下载| www.552070.com-彩球-| www.620921.com-黑马时时彩人工计划| www.946932.com-彩色沥青设备| www.14mk.com-七星彩合数与对数| www.278.space-小彩妆品牌加盟代理| www.4350.win-伯鑫彩网-| www.793411.com-中彩票后的人生| www.qn94.com-北京福彩中心app| www.26xy.com-福彩201902-| www.92aq.com-竞彩足球扣税吗| www.999713.com-95彩票平台彩网址| www.jp25.com-苹果版本的快三下载| www.493338.com-中你体育彩票| www.883689.com-彩之王下载地址| 彩多多www.78949h.com| www.970548.com-安徽快三遗漏统计值| www.tx56.com-爱彩乐新版-| www.88kd.com-买彩票哪些会违法| www.4870.cc-大数据足彩-| www.5172.cn-韩国五分快三| www.510716.com-彩虹屁小作文| www.ho34.cc-网络彩票赚钱| www.377826.com-福利彩票站几点开门| www.534870.com-下载拍拍彩票| www.870076.com-澳门彩票app下载| www.a72.org-中国福彩官网首页| www.90aj.com-大冶市福利彩票中心| www.7683.biz-彩票七乐彩开奖| www.213880.com-快3中彩网-| www.853323.com-查查七乐彩开奖号码| www.337571.com-彩金平台-| www.493290.com-热购彩票网址| www.707320.com-时时彩后一大小判断| www.812609.com-558彩票下载安装| www.222367.com-七星彩开奖历史查询| www.403587.com-ios彩票项目| www.169538.com-甘肃快三-| www.186309.com-大发快三是正规的吗| www.832188.com-七星彩摇奖结果| www.pw23.com-帝皇彩票下载| www.768839.com-时时彩最高倍率网站| www.428889.com-大信彩票怎么样| www.585397.com-首充1元送34彩金| www.683370.com-万购彩-| www.264818.com-中福快三一分钟| www.161015.com-体育彩票七位数玩| www.39335.cc-彩票3d同号预测法| www.978290.com-福彩3d彩图第一版| www.gk71.com-安阳聘礼和彩礼| www.639702.com-移动彩票靠谱吗| www.718902.com-彩虹羽泉百度云| www.805118.com-竞彩软件哪个好| www.869272.com-七星彩有什么软件| www.922296.com-易约约彩客服电话| www.970930.com-3d字谜中彩网| 小米彩票www.193006.com| www.2476.com-3d开奖彩迷画图| www.560199.com-有那些彩票软件下载| www.794613.com-重庆时时彩牛牛开奖| www.5339.biz-乐赢彩票网址是什么| www.582347.com-彩票几点停止销售| www.686722.com-中彩那天课文图片| www.798772.com-下载一个体彩福彩网| www.886027.com-yy彩票-| www.af0.cc-乐彩3d论坛-| www.09nl.com-泉州彩票聊天室| www.5mc.cc-重庆时时彩倍投技巧| www.39412.com-全民彩票是什么| www.6447.xyz-天天体彩下载官网| www.od87.com-黑客彩票快三软件| www.481001.com-三位数是什么彩票| www.526573.com-时时彩万能6码对应| www.178657.com-体育彩票官网| www.344598.com-彩票投诉平台| www.546062.com-体彩开店-| www.633726.com-m5彩票一级代理| www.752342.com-福彩3d杀和尾方法| www.901355.com-彩票打单技巧| www.989770.com-彩民乐阳光探吗图| www.jv57.com-人人彩票可信吗| www.696525.com-澳门时时彩有官网吗| www.851082.com-天地彩平台注册地| www.391655.com-体彩几位数字| www.524062.com-时时彩今天咋没开奖| www.4377.cm-网赚买彩票违法吗| www.932238.com-七星彩三字现方法| www.32879.com-彩票双色球开机号| www.427155.com-彩娱乐可靠吗| www.126543.com-查体彩开奖号码| www.82552.com-彩票专业走势| www.992309.com-3d福彩预测-| www.ec05.com-南国彩票论坛| www.719446.com-快三二不同概率| www.833535.com-福彩平台算违法么| www.893175.com-49彩票手机开奖| www.954512.com-安微快三形态走势| 乐8彩票www.6539x.com| www.603040.com-身边有没有彩票中奖| www.896365.com-江苏福彩快3开奖号| www.960940.com-网络彩票代理赚返点| www.bx64.com-派彩网代理-| www.a37.net-重庆时时开彩结果| www.707018.com-怎么买河南快三| www.766022.com-c58彩票苹果版| www.823582.com-彩凃钢板-| www.874820.com-7k官方彩票下载| www.942188.com-快频彩票害死多少人|