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.663549.com-天天中彩票怎么样| 皇都彩票www.qj63.com| www.088868.cc-彩票联盟可靠吗| www.495757.com-彩经网官网电脑版| www.702293.com-甘肃快三信用玩法| www.867570.com-19017七星彩| www.cai7822.com长春快三开走势图| www.5411.pw-1519彩票平台| www.600554.com-中堂彩zzyzcc| www.817837.com-星梦彩票综合图表| www.953411.com-好彩1中奖金额| www.gk54.com-福彩3d中彩网预测| www.85ji.com-赛车彩票开奖网址| www.6933.cm-七彩颜色的图片| www.875364.com-极速时时采彩下载| www.971224.com-往期彩票开奖| www.aj74.com-七星彩综合走势图| www.8lw.com-四个号码的彩票| www.0575.win-意甲万博博彩| www.00603.com-福彩3d定位走势图| www.51240.com-青蛙彩票的资料大全| www.06wj.com-青蛙彩票开奖现r场| www.1318.com-非法彩票平台名单| www.356419.com-网易彩基金怎么提现| www.520742.com-六和彩17期| www.985995.com-福彩站怎么样| www.ds93.com-博彩漏洞赚钱违法吗| www.288963.com-乐彩神app-| www.448207.com-胜负彩19026| www.zm73.com-中国电脑福利彩票| www.63kq.com-网络上福彩授权代销| www.890005.com-哪里可以买篮球彩票| www.995456.com-新浪彩票直播开奖| www.cz40.com-彩神团队是真的吗| www.005511.com-彩票平台软件出租| www.114432.com-体彩18136期| www.52iy.com-宝利国际彩票| www.2155.net-买体彩还是买福彩好| www.228751.com-易彩快三走势图| www.1149.vip-重庆时时彩预测软件| www.250918.com-豪彩app网站| www.083097.com-快三算概率软件| www.160449.com-爱心彩官网-| www.130777.com-体育彩票排列五结果| www.237704.com-彩票app系统| www.317221.com-九千万彩票网站| www.qx2.com-彩43app-| www.cp090.com-周易算法算快三| www.zl64.com-三分时时彩计算公式| www.57xa.com-中彩那天精美词语| www.1118.space-彩票屠龙怎么屠| www.375731.com-体彩排列三计算方式| www.569007.com-5188彩票系列图| www.654523.com-深圳福利彩票机转让| www.697884.com-彩吧论址首页| www.782751.com-51彩店靠谱吗| www.862727.com-上海天天彩选4| www.927714.com-俄罗斯28彩票| www.986973.com-河北省体彩中心| www.cz1.com-分分时时彩怎么玩| www.011366.com-昨日彩票结果| www.124145.com-福利彩票走势图下载| www.270465.com-093彩票官方下载| www.7283.top-幼儿体能儿歌彩虹岛| www.39077.cc-7彩阳光广播体操| www.3376.vip-彩02彩票软件下载| www.31293.com-鄂尔多斯福彩网| www.80102.com-5星彩开奖结果| www.261121.com-菜鸟驿站彩票机| www.452713.com-竞彩收米的软件| www.545598.com-八仙时时彩手机版| www.611618.com-彩票世界黑钱| www.728071.com-澳客体彩app下载| 爱购彩票www.243552.com| www.611683.com-褔彩3d走势彩经网| www.691133.com-8k彩票是骗局吗| www.789391.com-外围体育竞彩app| www.186119.com-快三输了能赢回来吗| www.320939.com-彩经网预测杀号| www.393167.com-株洲福彩中心地址| www.688115.com-微信买彩票公众号| www.756636.com-新起点全民彩票| www.834754.com-26期福彩开彩结果| www.892368.com-十一选五彩票网| www.951874.com-彩神8是合法网站吗| www.995074.com-惠彩是什么-| www.ir4.com-内蒙古时彩开奖结果| www.tt53.cc-华夏彩票是否合法| www.218956.com-百姓彩票是真的吗| www.298852.com-贵州体育彩票快三| www.379838.com-福彩3d连线报| www.520581.com-13彩票软件app| www.578832.com-福利彩票素材图片| www.019644.com-黔西南福彩中心| www.110470.com-鸿运网彩票怎么注册| www.219647.com-福建快三推荐一定牛| www.279872.com-福彩三地天气网| www.343768.com-玩彩票赚钱软件| www.415066.com-彩98cc-| www.503853.com-博雅彩票app下载| www.590368.com-18k彩金耳环耳扣| www.684519.com-福彩三地和值规律| www.771346.com-好彩网实力三肖八码| www.938666.com-北京市体彩中心地址| 亿万彩票www.456639.com| www.wt30.com-快三分布图图表示| 大赢家彩票www.5086g.com| www.004848.com-福彩33期开奖结果| www.726468.com-彩福彩票是骗人的吗| www.802410.com-吉林市福彩中心主任| www.873664.com-三的彩票还有试机号| www.971224.com-往期彩票开奖| 天下彩www.983480.com| www.ir26.com-足彩复式投注速算表| www.1597.cm-双色球彩票中奖秘籍| www.766337.com-手机彩票代理加盟| www.p56.club-甘肃时时彩-| www.735191.com-彩票哪种比较容易| www.813229.com-探探上加微信玩彩票| www.874574.com-杭州福彩网-| www.931536.com-快三网投娱乐平台| www.977545.com-河北彩票快三时间| www.cp9298.com-彩票巴士app| www.nx16.com-广西快三计划网| www.g02.biz-天空彩票谜语解一肖| www.31mo.com-足球竞彩大神推荐| www.1168.pw-彩票金句-| www.gn78.com-河南快三未出的号码| www.113143.com-七乐彩胆拖投注图| www.089583.com-中国体彩彩票网| www.23.me-境外黑彩平台| www.93ez.com-英国皇家5分彩| www.704896.com-时时彩个位杀号计划| www.780796.com-彩客网比分直潘| www.848567.cc-快三选三不同号| www.899895.com-彩票下app-| www.955571.com-彩票中屠龙-| www.992967.com-福利彩票走3d| www.sj3.com-分分彩日赚一千技巧| www.zz16.cc-申请开彩票店| www.589037.com-福彩专家预测胆码| www.660039.com-买彩票的概率| www.779360.com-魔图福彩-| www.831719.com-七彩注册-| www.887230.com-上淘快三开奖结果| www.947101.com-彩种计划大全| www.980475.com-7彩网一分快三| 99彩票www.854277.com| www.ir19.com-世界博彩三巨头| www.257726.com-网络可以售彩吗| www.365135.cc-今期老鼠报彩图| www.486553.com-附近哪有福彩销售点| www.246278.com-上海福彩新快3| www.333920.com-体彩七个全中多少钱| www.498879.com-体彩大乐透中四前区| www.554699.com-体育彩票名词解释| www.605322.com-手机怎样机选彩票| www.660826.com-体彩开奖软件| www.711383.com-我要天天福彩| www.772242.com-时时彩不能-| www.824128.com-三彩旗下有哪些品牌| www.878234.com-牛彩网3d图谜汇总| www.sp79.com-时时彩可以作弊吗| www.30tv.cc-彩虹岛副职业|