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.238120.com-安徽福利彩票官网| www.f38.club-彩票大全网址| www.0330.cc-彩票和值是什么意思| www.313006.com-鑫彩国际假不假| www.809940.com-数字型彩票投注技巧| www.024734.com-青岛福利彩票中大奖| www.745744.com-棒棒彩票大发计划网| www.607458.com-江西多乐彩机选| www.19qh.com-点击进入精彩内i容| www.793569.com-网络彩票输了怎么办| www.924940.com-销售彩票软件话术| www.297511.com-福彩三d四码遗漏| www.488870.com-七星彩最高中奖注数| www.cm40.com-福彩快三是怎样玩的| www.202990.com-精彩十分玩法1d| www.jo66.com-充100送28彩金| www.299335.com-q彩票是真是假| www.95939.cc-福彩考试题-| www.906985.com-易博彩票平台网址| www.607620.com-福利彩票审批在哪里| www.685706.com-福彩3d寻马图| www.774569.com-永利彩票网-| www.943189.com-网络彩票负盈利骗局| www.cp7357.com-5分彩走势图| www.c90.org-南国彩票论坛坛特区| www.86bx.com-福彩3d村杀码| www.968513.com-彩票倍投1000倍| www.5882.biz-彩票开机号下载| www.63326.cc-19039足彩分析| www.639209.com-彩票分析系统靠谱么| www.667175.com-5百彩票app-| www.947672.com-马云买过的彩票| JJ彩票www.12018.cc| www.cp6699.cc-快三屠龙-| www.7269.com-彩虹6号无人机干员| www.19639.com-福彩中奖怎么兑奖| www.77239.cc-怎么让彩票中奖率高| www.732718.com-汇彩平台-| www.817758.com-体彩一休杀号| www.899970.com-天天彩怎么下载| www.425228.com-添点七彩鲜花网| www.613203.com-宁夏福彩管理中心| www.20hx.com-也买彩平台手机版| www.234014.com-体育彩票快乐扑克| www.336034.com-彩票新规则和玩法| www.460480.com-炫彩油画怎么出售| www.556874.com-国家彩票是真实的吗| www.635671.com-彩宝贝七星彩开奖| www.716975.com-调色表大全彩铅调色| www.802632.com-吉林快三统计表| www.899899.com-玩百姓彩票网| www.968904.com-彩金价格2018| www.cp03.com-福利彩票查询| www.pz45.com-彩99官方下载| www.167796.com-福彩快3官网app| www.016267.com-彩票计划员可信吗| www.386106.com-福利彩票站快乐十分| www.56572.com-邯郸彩票中奖人| www.062214.com-万彩网是合法的吗| www.34iz.com-资彩印刷-| www.s77.tv-桐梓彩票-| www.77wc.com-美国28彩票-| www.66px.com-七乐彩最新走势图| www.cp7717.com-新快三遗漏走势图| www.565506.com-王牌彩票网下载| www.640934.com-凤翔彩票登录| www.719708.com-燕赵福彩网快3| www.794105.com-网络彩票赌博怎么玩| www.865446.com-甘肃体彩排列三| www.945636.com-我要彩-| www.992598.com-福彩任选五-| www.4883.cn-北京pk拾赢彩专家| www.033655.com-快三数字组合图| www.739003.com-体彩和福彩有假吗| www.816999.com-体彩中心公益开机号| www.912915.com-彩客是不是骗局揭秘| www.973242.com-彩虹快刷-| 彩61www.621764.com| www.30311.com-重庆福利彩票双色球| www.751630.com-一号彩票网可靠吗| www.128542.com-福彩快乐3开奖结果| www.233365.cc-体育彩票app官方| www.69910.com-广西体彩电话| www.028008.com-80彩票是啥-| www.124173.com-彩票漏洞诈骗| www.201921.com-手机购买双色球彩票| www.287554.com-贵卅快三开奖查洵| www.350124.com-博乐彩票注册登录| www.137944.com-凤凰购彩平台网址| www.nd89.com-保定彩票-| www.33oi.com-开福利彩票的手续| www.0341.in-广东快乐十分购彩| www.6292.biz-湖北福利彩票点查询| www.006005.cc-彩民村-| www.447229.com-彩迷是什么化妆品好| www.791428.com-彩经网杀排3| www.6558.cc-7彩乐开奖结果查询| www.54702.com-网上投注高频彩票| www.70466.com-香港票彩大全| www.19cf.com-海南私彩中了不给钱| www.304528.com-福彩河北基本走势图| www.414160.com-精彩的精什么意思| www.542232.com-附近福彩投注点| www.38hk.com-华众彩票注册| www.2471.pw-好彩网首页下载| www.9328.pw-统一彩票靠谱吗| www.83857.cc-海口彩票网早版互换| www.145456.com-滴滴彩票送28苹果| www.15733.cc-儿童画彩铅画的好处| www.499889.com-玩五分彩提现危险吗| www.585230.com-快三稳定数据| www.666085.com-新加坡华乐彩开奖| www.739681.com-帝豪ll时时彩| www.803725.com-广州鸣彩公司收费| www.878274.com-充值一百抢红包彩票| www.943800.com-百合网彩票-| www.982418.com-互娱彩票下载网址| www.cp224.com-一分快三计划软件| www.5673.in-中彩是什么意思| www.22209.cc-时时彩高手杀号技巧| www.63565.cc-足彩胜负九场开奖| www.jx0.cc-快三走势图河南| www.383828.com-彩票数据库下载| www.563023.com-9a彩票app下载| www.655235.com-福彩3d晚秋和值迷| www.730036.com-cp12彩官网-| www.823289.com-附近的福彩店| www.897257.com-澳洲彩票中奖规则| www.968024.com-刘亮彩票-| www.as83.com-彩票坊注册-| www.h16.club-哪种彩票星期六开奖| www.268.tv-什么是快三福彩| www.657377.com-卖彩票的店怎么开| www.947718.com-广西快三一定| www.620788.com-福彩三d字画谜| www.707958.com-彩票38元免费彩金| www.302899.com-快三还能玩多久| www.400589.com-七星彩开奖新浪直播| www.769405.com-老鹰彩票电脑版| www.008666.cc-彩票19029-| www.784591.com-彩票猫-| www.921845.com-彩神lll助赢器| www.gd58.com-江西快三跨度表| www.62el.com-发彩神-| www.2290.top-在线彩票娱乐大全| www.34235.com-6彩库宝典最新开奖| www.99019.com-彩票机选器大乐透| www.099571.com-福彩3d20019| www.173051.com-极速快三开奖网站| www.258383.com-竞彩足球异常监控| www.733084.com-南京体彩中心人员| 天天彩票www.943893.com| www.kp95.com-福利彩票字谜大全| www.606713.com-为什么足彩暂停销售| www.679022.com-乐彩网折线图| www.sr34.com-福彩专家预测汇总| www.13cg.com-六开彩财神网| www.915433.com-tcp688淘彩票| www.971984.com-湖北体彩案-| 13e彩票www.370837.com| www.ke44.com-网络体彩赌博| www.32655.cc-重庆结婚不收彩礼| www.556121.com-海口彩票网加急版| www.wz92.cc-七星彩今期开奖结果|