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天

知道了
58福彩 www.238820.com-网络套彩金算违法吗| www.441746.com-彩票站招店员一名| www.837923.com-1博彩票下载安装| www.973172.com-正版彩虹主站| www.hd0.com-中国快三彩票网| 众乐彩票www.305644.com| www.qn70.com-福彩快3几点结束| www.199856.com-快三二同号复选技巧| www.522701.com-时时彩万位大小| www.603593.com-山西彩票案-| www.683812.com-恒溢彩票app| www.761250.com-好彩妹好彩自然来| www.830660.com-易彩票手机版下载| www.906137.com-彩票购买平台靠谱吗| www.968935.com-澳门的软彩金手镯| www.68dw.com-彩票怎么防伪| www.642342.com-中国福利彩票商标| www.820031.com-河南省福利彩票快三| www.408366.com-彩票联盟平台怎么样| 818合彩www.www.9889hc.com| www.183672.com-中国福彩中心官网| www.9328.biz-体彩真能中奖号码| www.038232.com-网彩平台计划可靠吗| www.xf.com-彩票倍投-| www.392323.com-彩票投诉-| www.34118.com-彩票私带回血上岸| www.201349.com-乐佳商城彩票端| 乐发彩票www.115779.com| www.xj78.cc-乐彩bbs1-| www.237706.com-发彩网幸运快三计划| www.461457.com-彩垫宝彩票app| www.590023.com-竞彩分析资讯| www.688072.com-神兽竞彩新微信号| www.908974.com-体彩泳坛夺金玩法| www.985410.com-腾龙时时彩计划下载| www.63dl.com-福彩三地布衣天下| www.44756.com-云顶彩票-| www.3988.me-送彩礼和嫁妆问题| www.893585.com-红五彩票-| www.od71.com-江苏快三最大遗漏号| www.l47.net-彩神争霸官网登录| www.66jc.cc-亚投博彩-| www.0695.vip-彩票站能转让吗| www.99jd.cc-福彩3d五行算法| www.359887.com-体育彩票如何代理| www.nn47.com-体育竞彩app投注| www.883035.com-万豪国际彩票| www.996548.com-头奖彩票下载| www.od93.com-上海体彩网大乐透| www.128848.com-彩虹旗泡弟弟| www.811471.com-福彩开奖信息出来| www.922281.com-365彩票靠谱吗| www.983464.com-彩票带计划是真是假| www.kw71.com-玩快三犯法会判刑吗| www.075970.com-菜鸟彩票-| www.4450.vip-科学家解密彩票猫腻| www.9791.biz-爱赢球彩票靠谱吗| www.870414.com-快三一共有多少对子| www.80228.cc-河北省体彩中心官网| www.799140.com-网彩交流群-| www.888978.cc-彩站宝彩民端app| 网易彩票www.07163r.com| www.155999.cc-好彩客1055-| www.60ta.com-1216彩票-| www.412200.cc-做梦刮彩票中大奖| www.69ja.com-国乐彩会崩盘吗| www.180646.com-快三自动投注软件| www.293137.com-幸运彩幸运二任选| www.45vh.com-鼎盛彩票计划网址| www.412313.com-竞彩篮球新浪爱彩票| www.0rc.com-乐彩网账户怎么登录| www.503546.com-易博彩票网站| www.251208.com-彩8彩票app-| www.377738.com-腾讯时时彩游戏规则| www.463875.com-天狼星七星彩预测| www.688003.com-足球竞彩交流微信群| www.950985.com-彩运8是做什么的| www.cf39.com-吉林快三一天赢一千| www.10vm.com-彩票平台哪里有出租| www.8184.cc-热彩娱乐是真的吗| www.nd76.com-福彩大赢家-| www.591301.com-竞彩足球只买平局| www.666053.com-乐彩站合不合法| www.336015.com-黑彩服务器在国外| www.505234.com-竞彩不允许卖单场票| www.344600.cc-聚福彩票app| www.sr5.cc-河南七星彩开奖结果| www.nh50.com-310足彩网-| www.e39.cc-香港三分彩开奖网站| www.302572.com-735彩票-| www.353239.com-线条彩灯泡-| www.59uf.com-体彩机额度有限制嘛| www.5172.net-韩国彩票有几种| www.035454.com-彩票三态网-| www.cai1119.com河北快三助手下载| www.mc18.com-快频彩骗局-| 大赢家彩票平台www.810355.com| www.04eh.com-彩铅画如何叠色| www.21726.com-银行卡打彩金犯法吗| www.604864.com-雀彩-| www.634458.com-七彩孔雀建盏| www.943328.com-福彩快三开奖视频| www.22300.cc-下彩彩票注册送58| www.191318.com-怎样看一分快三走势| www.22557.cc-彩票坊平台-| www.956072.com-快三彩票网是真的吗| www.cp0998.com-快三彩票网-| www.sr09.com-中国体育彩票竞彩店| www.550776.com-竞彩比分走势图| www.523062.com-旺旺彩票中了怎么领| www.mb14.com-58彩票旧版-| www.603342.com-体育彩票奖金多少| www.668657.com-彩票三地二十四期| www.721706.com-5分快三计划表| www.782549.com-2元彩票网百度| www.846336.com-民政部福利彩票李绚| www.901809.com-昨天体彩3开奖号码| www.954091.com-黑龙江福彩官网| www.997046.com-海南省福彩快三| www.if64.com-合法的网上彩票| www.6935.top-七彩光谱-| www.17357.cc-彩套印刷-| www.53581.cc-希腊彩票开奖网| www.91679.com-500彩票助手| www.889361.com-神彩uv打印机| www.953163.com-福利彩票兑奖有效期| www.009384.com-178彩票平台真假| www.076658.com-彩票需要几位数| www.978581.com-极速快三彩票系统| www.cp881.cc-福彩甘肃快三走势图| www.oc36.com-时时彩后三胆码技巧| www.937306.com-湖北彩钢活动板房| www.929598.com-7星彩复式投注规则| www.655897.com-彩釉钢化玻璃| www.017954.com-网络彩票投注软件| 开心彩票www.685053.com| www.521956.com-英皇时时彩app| www.585015.com-带迷彩军人网名霸气| www.652368.com-福彩最新两元刮刮乐| www.717179.com-彩铅画优点-| www.786137.com-信游娱乐购彩平台| www.849205.com-香港利民彩计划| www.901655.com-中国体育彩票直列5| www.960333.com-酷彩为什么提现不了| www.995145.com-领奖彩票代玩| www.te7.com-彩种都有哪些| www.lg13.com-彩票界-| www.y66.xyz-易学彩票选号| www.tb20.com-查询福利彩票下载| www.586868.com-南方双彩安卓下载| www.703556.com-福彩电子报-| www.828241.com-吉购彩下载-| www.930607.com-彩票55官方下载| www.993769.com-中国足彩网第一彩| www.pi6.com-吉祥彩票下载安装| www.06ad.com-荷花怎么用彩铅上色| www.1583.xyz-快3彩票微信群| www.05192.com-彩票榜网页-| www.520744.com-时时彩如何杀一码| www.700050.com-新宝gg五分时时彩| www.889338.com-如意彩下载-| www.41ci.com-怎么上网买七星彩| www.cai677.cc-快三是什么游戏| www.9131.wang-彩壹万app-|