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.912569.com-彩客吧是什么| www.265690.com-最近彩票诈骗案| www.862955.com-礼拜五什么彩票开奖| www.964775.com-河南体彩网官方网站| www.75pr.com-时时彩对打套利技术| www.ru22.com-破解版彩票-| www.0222.cc-时时彩传统玩法介绍| www.46cs.com-好彩香烟铁盒装价格| www.78yx.cc-好彩管方版-| www.00eh.com-彩票摇奖现场直播| www.0687.cm-福彩背景墙设计| www.721663.com-双色球彩票计算器| www.882476.com-正规高频彩平台下载| www.pv03.com-98彩票犯法吗| www.05581.com-义乌福利彩票| www.03090.com-淘彩票注册邀请码| www.193464.cc-快三对子技巧顺口溜| www.300087.cc-金沙国际送彩金18| www.609991.com-玖玖彩票信得过吗| www.729526.com-新浪爱彩大乐透| www.828708.com-永信彩票app| www.916810.com-永盛彩票ys38| www.977001.com-古巴彩礼-| www.tq0.com-抚州彩票投注站| www.za36.com-福彩天地报在线读报| www.bk54.com-福利彩票快三计划| www.49586.com-中国福彩35选7| www.456213.com-彩票机会打法| www.40748.com-彩票单注最高买几倍| www.133647.com-彩虹桥-| www.680607.com-彩网2元网走势图| www.876753.com-一元一注的彩票| www.247899.com-有没快三群-| www.zn49.com-3d选号彩报-| www.2215.in-福彩3d公式-| www.982904.com-彩玉海棠什么价格| www.886.red-艾彩原创视黑冰公主| www.87vk.com-福彩3d天天彩报| www.79375.cc-福彩十二选52选五| www.38668.com-淘彩吧-| www.809882.com-赢彩网是合法的吗| www.957343.com-七星彩开奖30期| 华彩www.71399r.com| www.399636.com-海南彩票怎么注册| www.657483.com-7星彩奖直播| www.839983.com-北京pc是什么彩票| www.cp0114.com-江西多乐彩开奖号码| www.945066.com-福彩logo图片| www.22932.cc-彩票大奖新闻的背后| www.11615.com-彩票幸运选号彩乐乐| www.345354.com-财神⑥和彩-| www.513334.com-福彩3d开奖结果今| www.616150.com-福彩20选5预测号| www.695914.com-足彩复式投注计算表| www.617001.com-彩票1077安卓| www.336773.com-8号彩票官网| www.456714.com-彩易达怎么样| www.587132.com-彩播app官网| www.675150.com-足彩胜负彩中奖心得| www.785897.com-彩票巴巴-| www.873587.com-青蛙彩票80700| www.954690.com-下载体彩大乐透| www.cai0355.com彩票快三开奖查询| www.0806.wang-大发快三倍投计划表| www.9627.biz-手机彩票外挂| www.103043.com-上海快三计划群| www.873210.com-贵州彩票app下载| www.948308.com-彩票哪个中奖率高| 凤凰彩票www.77801d.com| www.um07.com-3d字谜双彩论坛| www.49ol.com-网上c9彩票app| www.33589.com-双色球专家说彩频道| www.344.me-亚米彩票平台| www.55013.com-陌陌彩票-| www.40qj.com-为什么七星彩那么难| www.043737.com-彩票代理拉人| www.127401.com-竞彩网计算机胜平负| www.202686.com-彩31-| www.273539.com-富人怎样买彩票的| www.342789.com-足彩比分规则详解| www.501813.com-易记彩票可靠吗| www.587376.com-新福彩3d今日字谜| www.685284.com-福彩3d彩票安装| www.773162.com-重庆时时彩5码组六| www.563186.com-老彩民新高手论坛| www.693061.com-口袋彩票安卓| www.0480.cc-东森时时彩登录| www.570124.com-m5彩票线路检测| www.635917.com-网上35彩票合法吗| www.560531.com-极速赛车彩票下载| www.653769.com-500竞彩网直播| www.716303.com-彩铅画鲲-| www.792856.com-福利彩票有几等奖| www.858325.com-足彩大赢家过| www.910193.com-福彩3d今天图吧| www.963646.com-足彩直播比分直播| www.cai85.com-河南快三走势图| www.nf11.com-505彩票-| www.03ih.com-互联网彩票停售| www.79ln.com-彩乐园2官方网站| www.2235.vip-彩薇花官方旗舰店| www.8200.cn-玖富彩票西-| www.4583.vip-彩票10元钱怎么买| www.35881.cc-三地和值中彩网| www.84ve.com-全中国彩票计划| www.068359.cc-赢彩计划软件下载| www.183114.com-七天彩票官网| www.670043.com-海南每天4十1彩票| www.427786.com-仁信彩票下载安装| www.cai6605.com快三技巧稳赚| www.72ks.com-体彩足球竞彩推荐| 百姓彩票www.bxcp3.com| www.363561.com-777福彩社区3d| www.js35.cc-快购彩票软件| www.03399.com-彩票假到什么程度| www.099510.com-彩75下载-| www.h30.cc-福彩3d開機彩寶网| www.026710.com-699彩票官方版| www.157328.com-足球彩票新浪| www.7617.top-1216彩票平台| www.15pi.com-中国福利彩票对联| 大赢家彩票网www.210955.com| www.721799.com-北京彩票大奖没领| www.0122.biz-彩色的近义词是| www.07521.com-500彩票计划助手| www.79611.com-尼彩手机n5-| www.981497.com-体彩48丨-| www.qw66.cc-彩世界-| www.47ov.com-体彩竞彩世界杯查询| www.970574.com-体彩专家-| www.723691.com-蕲春彩票-| www.191938.com-福彩三d走势图连线| www.258447.com-彩票365软件| www.330510.com-国家合法的彩票网站| www.32de.com-万国彩票官方网站| www.708.la-头头博彩-| www.767455.com-福彩74期-| www.678155.com-乐彩3d字谜图谜| www.925298.com-北京新快三查询| www.ro80.com-湖北快三怎么追豹子| www.47il.com-风之彩唐老大制度| www.81111.cc-福彩3d猜谜第四版| www.543614.com-国家彩票坑人| www.399356.com-go6h彩图-| www.648686.com-518彩网注册帐号| www.779101.com-香港彩基本走势图| www.862366.cc-手机新浪网彩票| www.922859.com-彩钢板围挡施工方案| www.ql44.com-立彩app下载| www.8ck.com-a8彩票可靠吗| www.81378.com-易利三分彩开奖| www.pu21.com-彩票跟单员是真的吗| www.3286.cm-借钱买彩票合法吗| www.528226.com-时时彩看号手机软件| www.639362.com-青海省福彩中心官网| www.951842.com-58彩丨58彩开获| 大赢家彩票平台www.369052.com| www.894567.cc-31彩票走势图| www.985407.com-凤凰时时彩官方网站| www.bg49.com-博彩app排名| www.pm13.com-大发快三宝典| www.10ir.com-55彩票怎么看走势| www.72vq.com-福彩刮刮奖倾家荡产| www.1271.vip-七乐彩今晚预测|