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.768468.com-下截个粤淘彩票| www.879887.com-大发彩票的骗局| www.bl69.com-下彩彩票安卓版| www.43hf.com-彩色宝石戒指| www.312938.com-新彩彩票官网下载| 购彩堂www.853548.com| www.07xj.cc-彩芽的天真好奇心| www.149670.com-甘肃张掖快三| www.411150.com-足彩术语解释| www.92bt.cc-七乐彩独胆汇总预测| www.974299.com-怎样使用手机买彩票| www.101193.com-福利彩票3g太字谜| www.104800.com-靠谱的体彩软件| www.938783.com-江苏亿彩下载| www.bs85.com-彩票中奖内部秘籍| www.85cg.com-wow炫彩之剑| www.457529.com-助手本子全彩无翼鸟| www.463602.com-汇赢彩票-| www.003815.com-彩之源是正规平台吗| www.254265.com-快三一天最多输多少| www.885529.com-利彩快3必中软件| www.4282.org-k345cc天空彩| www.95860.com-彩票中心上班好吗| www.32154.com-易彩集团注册邀请码| www.248449.com-app彩868-| www.539624.com-什么是彩票跨度| www.7yd.com-买彩票中奖50万| www.566957.com-好彩堂幽默资料| www.769233.com-福利彩票开店标准| www.992744.com-江苏快三可以玩吗| www.73522.cc-高频彩套利怎么学| www.950285.com-湖北百宝彩公众号| www.396312.com-彩博论坛-| www.647221.com-玩时时彩两年输2万| www.pm89.com-体彩彩乐乐-| www.9968.org-天天彩票真的吗| www.a14.top-湖北快三和值跨度变| www.254622.com-福彩3d字谜.| www.721408.com-购彩大厅开奖| www.81fz.com-聚彩app-| www.835732.com-四年级中彩那天教案| www.774966.com-秒秒快三技巧| www.uq32.com-下载彩票双色球| www.068.space-博彩软件犯法吗| www.01644.com-彩票平台套利可靠吗| www.54ev.com-彩民直通车下载| www.201538.com-10分快三规则| www.48in.com-福彩3d有多长时间| www.442341.com-体育彩票免费推荐| www.19gw.com-韩国5分彩开奖网址| www.22833.cc-全民快3彩票| www.196726.com-彩票高手预测| www.731053.com-中国足彩必发指数| www.69789.com-大彩鲸11选5| www.273944.com-时时彩1分彩计划| www.525477.com-玩彩乐苹果版| www.731422.com-中彩网3专家预测| www.4do.cc-刮刮扫码彩票机| www.sp35.com-610彩票官网| www.198792.com-福彩三地字谜| www.837847.com-岩棉彩钢板厂家| www.9448.xyz-彩票k线图软件下载| www.340704.com-体彩反水是什么意思| www.812468.com-178彩票走势图| www.5782.vip-今天上海快三结果| www.382009.com-腾讯分分彩后二打法| www.lh0.com-体彩快3选号技巧| www.2555.tv-时时彩k线趋势分析| www.286550.com-彩票预测算号软件| www.578529.com-体彩店设计-| www.711595.com-中国500万彩票网| www.cp2201.com-福彩快3技巧口诀| www.14qc.com-手机版百乐彩怎么玩| www.36458.com-乐彩客网页版| www.062326.com-立彩彩票靠谱吗| www.630221.com-梦码解码七星彩公鸡| www.776150.com-购乐彩app-| www.zx65.com-大通彩票线路导航| www.9678.live-体育彩票试机号多少| www.237547.com-玩幸运快三怎么倍投| www.400192.com-快三湖北助手| www.741888.com-购彩堂软件-| www.874685.com-012路表快三| www.on96.com-彩票难中奖吗| www.39tl.com-温县订婚彩礼多少钱| www.33109.com-烟台快三开奖结果| www.266114.com-千亿彩票3-| www.590391.com-幸运彩网站是真的吗| www.939175.com-手机足彩比分直播| www.ok82.com-福彩控-| www.642.com-彩乐乐怎么买彩票| www.30359.com-体彩网app安全吗| www.009559.com-798彩票app-| www.31eu.com-市福彩中心兑奖金额| www.6019.cn-山东福彩兑奖| www.53092.com-五分彩是哪里的| www.125932.com-彩票网站名字大全| www.277307.com-500彩票极速| www.661507.com-过夜彩金幸运28| www.787484.com-开彩网计划-| www.959477.com-佳缘女孩带我玩彩票| www.ti3.com-彩票开奖结果查绚彩| www.7xz.cc-澳门足彩新闻| www.0713.pro-体彩网点检测报告| www.74605.com-立博足彩-| www.085551.com-聚宝盆彩票网站| www.317215.com-九千万彩票网| www.504208.com-彩排近义词是什么| www.624533.com-彩票界的黑平台| www.885040.com-9号彩票手机app| www.yu54.com-彩久彩票能赢钱吗| www.89is.com-彩77是正规网站吗| www.7773.net-浙江体彩悦奖| www.175987.com-原快三助手-| www.399042.com-七星彩浙江-| www.624206.com-时时彩直播现场| www.934017.com-微信美女玩彩套路| JJ彩票www.647311.com| www.tf80.com-时时彩不会亏的方法| www.1292.com-老三国精彩打斗片段| www.73055.com-快三二同号| www.201098.com-5分彩怎么玩| www.318189.com-彩票助赢计划网| www.596455.com-2008年福彩和值| www.778111.com-2018网上购彩| www.lg46.com-下载红彩app| www.43434.cc-够力长条七星彩奖表| www.222340.com-河北快三号码统计表| www.338234.com-中奖彩票图片最新| www.533755.com-福彩真的有人中奖吗| www.877148.com-福利彩票三d怎么玩| www.jt41.com-新3d彩定位胆技巧| www.67kp.com-七乐彩选号精准技巧| www.3791.xyz-竞彩足球稳赚买法| www.21737.com-买彩票诈骗案例| www.97951.com-彩票兑奖时间期限| www.152895.com-彩霸王论坛小鱼儿| www.697750.com-彩票大赢家网| www.871941.com-瑞彩祥云是正规的吗| www.mq6.com-快三走势怎么看| www.g16.club-正版福彩双双字谜| www.352.tv-我爱彩票登陆| www.51656.cc-竞彩网官网-| www.195548.com-168彩票官方网站| www.486481.com-竞彩蓝球玩法讲解| www.671971.com-体彩19041期| www.xl58.com-在线阅读福彩天地报| www.98wv.com-江苏体彩7位数直播| www.30360.com-京东彩票怎么买彩票| www.026113.com-有哪些私彩老平台| www.388423.com-天下彩五行数字| www.576794.com-关于彩票的图片大全| www.650311.com-竞彩2串1投注技巧| www.852661.com-中国体彩在线| www.976694.com-宜宾彩礼-| www.5559.tv-幸福彩手机报准确吗| www.54762.com-双色球彩报指南今日| www.024418.com-彩神通软件下载| www.134422.com-北京好彩烟哪儿买| www.220793.com-大奖彩票下载| www.352295.com-青蛙彩票怎么下载| www.452077.com-333彩网资料大全| www.550799.com-福彩网址导航| www.874361.com-大发快三和值预测|