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.970505.com-安徽体彩网唯一官网| www.581710.com-爱彩彩网官方| www.739269.com-众发彩票下载安装| www.888778.cc-078彩票-| 乐彩网www.598966.com| www.wf88.com-内蒙古快三分析| www.84uk.com-彩票飞艇聊天室| www.7217.com-体彩每星期几开奖| www.rv34.com-博牛彩票破解| www.41bz.com-河南的彩礼多少钱| www.470.xyz-福彩3d九宫寻宝图| www.267556.com-彩票要不要加倍| www.368811.com-728彩票新官网| www.702320.com-体育彩票招聘| www.780689.com-福彩双色球分析大师| www.858352.com-有完高频彩赢钱的吗| www.921883.com-91彩神贴吧-| www.977971.com-快三怎么买能赚到钱| www.cp7128.com-五分彩骗局-| www.515790.com-彩票奖券纠纷| www.f44.club-国乐彩软件-| www.514618.com-压模彩色地坪材料| www.633202.com-众乐彩大发-| www.155836.com-时时彩机器人软件| www.305997.com-刷彩app是真的吗| www.420185.com-卓易彩票违法吗| www.553330.com-邯郸体彩中心地址| www.647368.com-足彩讨论区-| www.xc26.com-体彩排三选胆图| www.43qx.com-合肥福彩十个转让| www.740.vip-时时彩和值图解| www.409858.com-竞彩足球预测列表| www.523018.com-极速赛车彩票正规吗| www.599251.com-海南七星彩开奖| www.672985.com-七星彩中奖7注| www.751988.com-亚慱彩票-| www.8188.online8炫彩自助彩票终端| www.59090.com-梦迷解图七星彩| www.99tk.com-彩八彩票是假的吗| www.700053.com-168彩栗-| www.08998.com-买彩票的公众号| www.593236.com-7彩阳光慢动作| www.657494.com-体彩排五今日预测| www.11855.cc-辽宁体彩网一选五| www.265901.com-北京快三遗漏数据库| www.554255.cc-宣传体彩标语| www.638794.com-体育彩票竞彩上海| www.762455.com-彩富网最快报码系统| www.200.bid-盈彩的意思是什么| www.12677.cc-福利彩票奖励级别| www.68bi.com-爱乐透手机彩票网站| www.363345.com-那个软件还能买彩票| www.541678.com-360全国彩票查询| www.177.cn-彩票万能计算器| www.5266.tv-彩经网工具箱下载| www.49sg.com-彩友计划-| www.1795.org-福彩3d布衣字谜| www.02078.com-彩票2元网下载| www.339436.com-体彩大乐透几号开奖| www.041255.com-彩票长龙最长多少期| www.169782.com-韩国快三走势图| www.9546.biz-中彩票40万图| www.262906.com-广州体彩11选五| www.974353.com-快三啥时候开奖时间| www.11nr.com-中华神彩app| www.633497.com-七彩直播app下载| www.226542.com-彩托-| www.753802.com-吉祥彩票app下载| www.887512.com-古彩-| 大众彩票www.923887.com| www.919786.com-搭建网络彩票源码| www.009571.com-手机平板彩膜项目| www.804806.com-香港4s彩票-| www.242378.com-体彩走势图大全| www.34640.com-好运快三就是个坑| www.27669.cc-七乐彩走图-| www.3002.wang-福彩3d开笑-| www.14100.com-中国体育竞彩网比分| www.995787.cc-足彩贝叶斯分析技巧| www.71523.com-福彩今天全部图纸| www.a76.top-彩博app苹果下载| www.57nd.com-丢彩票得了抑郁症| www.557666.com-购彩在线邀请码| www.660248.com-ai彩预测-| www.756591.com-全民彩票客服电话| www.820222.com-农村天价彩礼的原因| www.939350.com-彩吧图谜汇总| www.cp182.cc-分分快三预测大小| www.ln65.com-怎样下载中彩网| www.38295.com-大奖彩票是大平台吗| www.127816.com-彩虹岛当年很火吗| www.204949.com-福彩快3河南走势图| www.582083.com-乐彩网000-| www.662938.com-福彩3d易彩网| www.731109.com-淮安彩票店招人| www.814356.com-东升娱乐彩票骗局| www.891543.com-彩票统计安全下载| www.954632.com-国外彩票网站合法吗| 13e彩票www.809381.com| www.19236.cc-彩票领奖带银行卡吗| www.222054.com-海南七星彩专家预测| www.69466.cc-怎样制作竞彩表格| www.028646.com-福彩3d彩彩报| www.019638.com-网上天天彩票合法吗| www.091083.com-百姓彩票是黑彩| www.156220.com-01彩票服务器| www.219376.com-福建省体彩网| www.887390.com-下彩彩票客户端下载| www.951698.com-uc彩票注册送28| 彩乐坊www.00clf.com| www.6800.org-福利彩票特别号范围| www.13206.com-竞彩今日推荐| www.54088.com-正规的篮球博彩| www.89883.com-网易模拟彩票| www.731408.com-中国竞彩网官网主页| www.807825.com-500彩票开奖号码| www.877788.com-国外的足彩怎么买| www.940021.com-吉林快三总盘| www.994248.com-彩票大师数据分析| www.lw0.com-关注吉林今天快三| www.ok01.com-北京福彩快三合法不| www.770439.com-网络黑彩赌博刑案例| www.189630.com-河南快三走势及预测| www.302389.com-南国七星彩规律图| www.010899.com-五星彩平台下载| www.122059.com-买了彩金很后悔| www.745248.com-星光彩票网站登录| www.678862.com-高飞彩云网配方下载| www.815286.com-福彩3d工具图表| www.900768.com-安徽快三专家荐号码| www.984129.com-山东福彩网首页| www.eq31.com-炫乐彩票下载手机版| www.112354.com-彩票注册送20现金| www.055860.com-赢彩王软件准吗| www.436860.com-手机上如何买彩票| www.272030.com-江苏快三来-| www.3236.win-中彩在线怎么样| www.900591.com-彩吧图库第一版应用| www.799.xyz-大六壬测彩票真经| www.89341.com-顶级彩票客户端| www.232100.cc-中彩网买彩票安全吗| www.716128.com-宝马彩票咋样| www.806071.com-99彩彩票-| www.885769.com-体彩兑奖后多久到账| www.975823.com-狂人时时彩后二技巧| www.uw9.cc-彩票计划软件大全| www.sk88.cc-时时彩无损刷流水| www.3431.org-7乐彩走试图| www.77807.com-竞彩之家网页版| www.008601.com-胜负彩19022期| www.49088.cc-腾讯重庆时时彩| www.304504.com-甘肃快三推号| www.377197.com-qq7彩-| www.150669.com-体彩选号缩水软件| www.781236.com-微彩店合法吗| www.lh84.com-中彩娱乐提现不了| www.160758.com-五洲彩票是正规的吗| www.233662.com-彩乐汇提现是真的吗| www.586234.com-彩经网七乐彩杀号| www.515626.com-高频彩彩票如何盈利| www.579028.com-淘宝彩票在哪买| www.659502.com-新彩吧丹东3d图迷| www.713195.com-体彩大乐投开奖时间| www.780804.com-彩票如何赢钱|