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.343993.com-中国体彩站点查询| www.694336.com-彩票店只卖3d| www.806488.com-竞彩足球模拟| www.922550.com-知名足彩分析师| www.024021.com-攻击黑彩的黑客| www.10122.cc-微彩娱乐平台手机版| www.858437.com-体彩和值遗漏统计| www.49900.cc-福彩3d图库第一版| www.052671.com-5oo万彩票网即时| www.182558.com-福彩双色球走势图| www.282729.com-自己玩时时彩犯法吗| www.456404.com-彩易达西安-| www.5940.com-500彩票账号注册| www.9850.org-太和殿彩画-| www.5447.vip-彩38领导者app| www.168422.com-新快三形态走势图| www.474172.com-腾讯分分彩倍投方案| www.607151.com-德国彩票中奖号码| www.8921.cn-竞彩可以全国兑奖吗| www.177453.com-福利彩票是什么快三| www.355428.com-彩乃奈奈百度网盘| www.474698.com-500彩票可靠么| www.568898.com-梦到自己买彩票中奖| www.314879.com-时彩稳赚方法| www.280970.com-时时彩员工会坐牢吗| www.mt82.com-福彩3走势图表| www.h99.net-全国联网彩票走势图| www.469885.com-彩娃彩票-| www.73803.com-管家婆彩图大全| www.079041.com-牛蛙彩票正版资料| www.163446.com-巨彩网有朋友赚钱吗| www.3652.biz-足球任九购彩| www.672171.com-特彩把旧网-| www.933601.com-东彩娱乐平台可靠吗| 购彩堂www.113438.com| www.86787.com-竞彩猫官网登录| www.560094.com-玛骓彩票游戏| www.177119.com-三分快三下载| www.873532.com-彩38软件-| www.054770.com-中国彩app下载| www.888641.com-互联网彩票2018| www.986674.com-校长福彩预测| www.r73.com-福彩汇总预测| www.2853.biz-网上禁止买彩票了吗| www.010668.com-5星彩app-| www.772396.com-福彩快三多少钱| www.075.org-彩票16网站-| www.jb20.com-福彩规则中奖规则| www.36rr.com-彩百万-| www.781716.com-彩票中多少收税啊| www.950056.com-中国福彩开奖结果查| www.ix03.com-彩票民间高手技巧| www.08ju.com-体彩排三两码遗漏| www.172337.com-分分快三咋看走势图| www.343400.cc-时时彩在哪买| www.573458.com-快三本金计划| www.503962.com-彩票提现方法| www.5050.net-竞彩足球怎么停售了| www.06149.com-中彩改棋牌app| www.56655.com-南昌彩票店转让| www.sp0.com-体彩排列五开奖直播| www.ne87.com-c038彩票官-| www.986508.com-阿里巴巴福彩是什么| www.fe24.com-快三第一门户| www.k66.org-上海快三软件真的吗| www.49mu.com-豹赢彩票最新版| www.911.pw-为什么买彩票不中| www.5824.cc-时时彩账号注册网址| www.188715.com-快三怎么判断龙| www.599268.com-最简单的买彩票技巧| www.353222.com-668彩票网平台| www.828632.com-长沙福彩自助投注机| www.at02.com-福彩时时乐走势图| www.842.tv-旧版彩库宝典下载| www.14ud.com-旧彩界联盟-| www.20978.cc-网上彩票诈骗| www.82867.cc-中国福利彩票真实吗| www.034761.com-u9彩软件下载| www.759202.com-亿彩团-| www.e16.club-自带计划的彩票软件| www.33969.cc-梦网福体彩票开奖| www.869856.com-双色球彩票开奖频道| www.7336.xyz-小米彩虹电池电量| www.000669.cc-多彩网怎么下载安装| www.44056.com-体育彩票投注方式| www.90ml.com-3d彩票缩水工具| www.720636.com-七星彩中奖了怎么办| www.972540.com-彩铅艺术画图片大全| www.21411.cc-博汇彩票正规吗| www.607680.com-韩国彩票走势图| www.303937.com-甘肃福利彩票下载| www.699161.com-无基础彩铅画入门画| www.976475.com-网上彩票怎么代理| www.hw95.com-贵州快三查询| www.10zk.com-零基础学彩铅画| www.822913.com-粉百和三d彩吧| www.376379.com-哪个平台玩彩稳定| www.659469.com-澳彩胜负开奖结果| www.27919.cc-博雅彩票苹果| www.w99.cn-建湖体育彩票机转让| www.91ls.com-天天中彩票幸运追号| www.070862.com-温州快乐彩开奖结果| www.025453.com-彩票开奖采集| www.114449.com-福彩中心1360亿| www.210221.com-快三会不会赔| www.224637.com-综艺股份彩票| www.299380.com-豪彩下载安装| www.09982.com-齐鲁彩票3d-| www.63963.cc-足彩6倍投盈利计划| www.10yu.com-安全彩票网站| www.376837.com-福彩36期开奖号码| www.503351.com-彩之堂网彩可靠吗| www.589993.com-南粤彩票论坛七星彩| www.cp9138.com-彩29app下载| www.61725.cc-七星彩专家推荐汇总| www.300500.cc-天津畅赢彩票大案| www.093935.com-福彩开奖公告结果| www.260621.com-新疆肘时彩开奖号码| www.81037.com-福彩机器键盘说明| 爱彩乐www.754918.com| www.tm84.com-安徽快三破解| www.14ut.com-时时彩年后开奖时间| www.1788.live-二八彩app下载| www.8273.org-彩票返水什么意思| www.32302.com-易赢彩票骗了多少人| www.80477.cc-邯郸银行买彩票一案| www.596342.com-兰州体彩2等奖| www.38317.com-云南时时彩彩开奖| www.91858.cc-《中彩那天》| www.606713.com-为什么足彩暂停销售| www.020394.com-心脏彩超正常值图| www.082776.com-各省快三开奖查询| www.131694.com-豫彩通功能-| www.600945.com-一注彩票能种多少钱| www.304425.com-正规网上购彩app| www.043847.com-怎么查中国福利彩票| www.486179.com-重庆体彩官方网站| www.570171.com-腾讯彩票线路检测| www.643000.com-美宝莲彩妆加盟价格| www.948220.com-体彩发行中心| 500彩票www.349077.com| www.124468.com-彩票历史开奖数据| www.213252.com-江苏一分快三下载| www.277679.com-全国快三彩票| www.004112.com-福彩双色球几点关机| www.056615.com-合肥彩票店转让信息| www.890786.com-青岛快三正规吗| www.001863.com-鲛人鲨福彩3d| www.6513.com-牛娃彩票导航网| www.356272.com-网购送彩票犯法吗| www.436860.com-手机上如何买彩票| www.851055.com-时时彩暴富-| www.1546.vip-体彩自助投注机| www.003998.com-c59彩票app-| www.a65.net-彩票高人-| www.39536.cc-豪彩v1p-| www.18725.com-中国足彩竞猜胜平负| www.790310.com-炫彩界面库教程| www.46nh.com-二四六天彩开奖结果| www.984681.com-鼎盛团队彩票计划网| www.654587.com-彩友吧彩民朋友的家| www.774222.com-彩票公式怎么计算| www.964523.com-福8彩-| www.yt15.com-吉林省福彩官方网站|