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.yv57.com-惠明彩票-| www.808033.com-七星彩开奖频道| www.975271.com-彩票都是骗局揭秘| www.358918.com-四川福彩手机报下载| www.526993.com-澳洲快三开奖走势图| www.910716.com-中国足彩网正规吗| 如意彩票www.858659.com| www.37561.cc-中彩网擂台赛丶| www.417237.com-湖北快三多少钱一注| www.984162.com-大乐透论坛彩吧论坛| www.uz7.cc-马来三分彩开奖网站| www.58769.cc-圣地彩官网开奖结果| www.046503.com-天天彩app-| www.mn07.com-7星彩票开奖结果| www.924898.com-福彩3d综合走势| 幸运彩票www.112819.com| www.ox37.com-宁夏福利彩票3d开| www.3es.com-热购彩票能提现吗| www.37752.cc-彩虫七星彩-| www.576447.com-一分快三彩票倍数表| www.016738.com-人人中彩票苹果版| www.01lt.com-彩虹图案代表的寓意| www.754600.com-三d开奖中彩网| www.8116.in-pk彩票手机版下载| 天天彩票www.205880.com| www.048826.com-燕赵福彩排列五| www.108577.com-买彩票可以致富吗| www.541.date-五亿彩下载苹果| www.wy19.com-网易彩票恢复了吗| www.24ul.com-派彩河北快三| www.93oy.com-白底属于彩照吗| www.867392.com-那个彩票网站最正规| www.4423.vip-彩久彩票-| www.53619.com-如何申请87彩店| www.493345.com-彩票开奖时间下期| www.402211.com-乐购网彩票-| www.015825.com-福利彩票店怎么申请| www.620936.com-3d杀号定胆彩乐乐| www.96js.cc-易博彩票平台| www.6441.cn-福彩三地大报纸| www.20191.cc-彩票高手选号秘笈| www.64808.cc-体彩三码遗漏组六| www.215979.com-体育彩票规则及玩法| www.439940.com-22598彩票-| www.613666.cc-彩票带赚-| www.750588.com-中彩大神推荐群| www.887049.com-我360彩票-| www.989168.com-彩票机器多少钱一台| www.ps89.com-三分彩软件-| www.07558.com-500彩票计划网站| www.964316.com-体彩61-| www.686072.com-广西彩票中奖| www.7116.top-彩128-| www.57967.com-彩之乐是什么网站| www.16714.com-福利彩票快三手机版| www.088563.com-乐途彩票网app| www.172056.com-福彩5d玩法-| www.253738.com-博众时时彩官方网站| www.331754.com-中彩网排三开奖查询| www.437600.com-成为一名彩票迷| www.92899.com-复式彩票怎么算钱| www.566392.com-必发彩票官网| www.vw35.com-乐购彩票是真的吗| www.6831.biz-今日竟彩足球推荐| www.79696.com-贵州快三派奖奖金| www.mf0.com-快三开奖号码内蒙古| www.92021.com-丰彩彩票是真的吗| www.256765.com-彩票12下载-| www.231505.com-湖北快三助手软件| www.027568.com-重庆五分彩官方平台| www.366338.com-福利彩票23期| www.872383.com-福彩开奖直播新浪| www.io42.com-竞彩足球单关走势图| www.22851.com-王者彩票是黑平台吗| www.464904.com-竞彩足球信息网| www.581570.com-海口网七星彩早版版| www.678008.cc-3d走势图南方双彩| www.862548.com-昨天福彩多少号码| www.945501.com-福彩头像图片| 500彩票www.50024n.com| www.wc91.com-日本彩票开奖查询| www.216060.com-七星彩千位杀码公式| www.441377.com-百宝彩视电话| www.ei00.com-福建省福利彩票| www.2162.cn-彩票代购app| www.318540.com-七七星彩吹吹| www.99729.cc-彩票下载安装168| www.ef81.com-高频彩票有哪些| www.22bl.com-东北彩票大王视频| www.976812.com-福彩双色球泰安中奖| www.co86.com-168彩票-| www.za84.com-春秋彩票登录| www.25jo.com-华彩赢家是真的吗| www.180573.com-中彩彩票是真的吗| www.893867.com-彩61app苹果| www.cp654.com-4亿彩票送41| www.xk77.com-鑫彩彩票-| www.49cq.com-排列三夸度彩乐乐| www.1916.website时时彩组6怎么追号| www.670084.com-彩票号几位数| www.153669.com-158彩票正规吗| www.657464.com-e777乐彩下载| www.ad66.com-1分快三计划稳定| www.247229.com-上海体彩管理中心| www.347422.com-天天爱彩票公司| www.570416.com-凤凰彩票安全可靠吗| www.952288.com-中奖彩票app| www.yo64.com-下载吉林体育彩票| www.07ck.com-彩铅星空麋鹿图片| www.567.gg-时时彩怎样分辨虎龙| www.301889.com-湖北新快三软件下载| www.373719.com-500足球精彩比分| www.572327.com-今天3d天天彩报| www.40dq.com-中信彩票网-| 博汇www.865807.com| www.543203.com-江苏快三骰子分析| www.650192.com-海南体彩4十1开奖| www.9471.mobi-体彩胆是什么意思| www.527759.com-时时彩任二怎么玩| www.599256.com-数字挑选选法买彩票| www.688932.com-彩6游戏-| www.476488.com-福彩十选八-| www.42yi.com-体彩胜负彩怎么投注| www.98149.com-时时彩三中三计划| www.ds10.com-内蒙古时时彩彩开奖| www.071340.com-彩八在线-| www.017071.com-体育彩票店怎么开| 旭彩www.565378.com| www.096627.com-江西体彩中心官网| www.4988.cn-盈盈彩官网彩票| www.ev22.com-大奖彩票-| www.l15.cn-大发0234彩-| www.706890.com-趣客站时时彩| www.850915.com-极速时时彩公式集合| www.975528.com-时时彩算号公式| www.oa22.com-福彩快三豹子守号表| www.791666.cc-3d彩图字谜-| www.863311.com-众彩网双色球预测| www.920814.com-财神讲彩专栏| 天下彩www.623660.com| www.iz27.com-辽福彩-| www.wf62.com-幸运彩票官网| www.ph54.com-网上买彩票很多| www.75kc.com-足彩独赢是什么意思| www.727062.com-大爆奖彩票官方网站| www.818984.com-七星彩最新预测| www.889020.com-彩票斩龙方法| www.987029.com-万博彩票怎么下| www.hw46.com-彩票三中三技巧| www.197411.com-马来西亚博彩诈骗| www.426755.com-烟台福彩招聘信息| www.685619.com-福彩家财网-| www.680713.com-彩票分析师骗局| www.822250.com-彩巴3d迷图第二版| www.913824.com-黄金集团彩票靠谱不| www.984106.com-75彩票平台-| www.aj88.com-预测今晚七星彩号码| www.a35.org-广西快三单双预测| www.72hn.com-足彩软件贴吧| www.970699.com-中国福彩新规| www.dy96.com-吉林快三网站盘| www.201233.com-查询彩票-| www.537053.com-彩票头像图片| www.545437.com-福利彩票30选七|