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天

知道了
百盈PK10 www.604298.com-奥发彩票网-| www.521119.com-七乐彩各省中奖结果| www.565945.com-一线彩库-| www.961013.com-广州鸣彩有限公司| www.3955.me-体彩小蓝报-| www.0639.cc-香港5分彩顶呱古| www.22071.com-尼彩手机如何| www.095810.com-四川体育彩票七星彩| www.02tp.com-世界杯微博彩票| www.091196.com-w彩票平台登录| www.182047.com-彩票开奖快三| www.286763.com-福彩申请电话| www.334112.com-开彩传媒公众号| www.699632.com-ζ3d走势图新浪彩| www.272175.com-博牛彩票一首页| www.155633.com-9928彩票-| www.285826.com-159足彩app-| www.869119.com-快三平台时间差| www.964409.com-官方福彩幸运快| www.zs.com-银川福彩3d-| www.268529.com-2元彩票网走势图表| www.385952.com-快3彩票助手软件| www.508928.com-华夏顺彩电动车| www.914947.com-大发博彩老板| www.999318.com-快三如何回血| www.je04.com-彩客竞彩彩票骗局| www.60if.com-足彩和蓝彩哪个好中| www.555385.com-快三顺子下期出什么| www.390329.com-qq群买双色球彩票| www.324225.com-青岛福彩养老院| www.515245.com-七星彩中3位多少| www.232050.com-福彩3d字画图片| www.718489.com-羽泉彩虹mv-| www.263709.com-彩票最新开奖大全| www.775362.com-o1年彩神喷绘机| www.866025.com-福彩快乐十分倍率| www.942664.com-众彩易购是真实的吗| www.cai5544.com分分快三计划| www.292636.com-内蒙福彩官方| www.522421.com-易彩官方彩票网站| www.729110.com-彩16官网正版下载| www.802040.com-吉林省打击黑彩培训| www.881836.com-网络彩票计划群骗局| www.954384.com-90年亚运彩票| 500彩票网www.843533.com| www.115818.com-qq彩票是正规的吗| www.518244.com-乐发彩票我的账户| www.663185.com-彩票平台是一起的吗| www.786281.com-手机大赢家彩票| www.896964.com-aa彩票助手-| www.978895.com-快三如何倍投| www.8fa.cc-709官方彩票网| www.378051.com-江苏竞彩店转让| www.99fl.com-了d彰彩吧图库| www.69395.cc-博客彩登录-| www.594887.com-87彩店骗局怎么样| www.691011.com-篮球竞彩投注| www.796430.com-快三注册代码是什么| www.884184.com-黑客攻击彩票网站| www.984857.com-乐透彩票概率计算| www.ek52.com-彩吧助手出号走势图| www.o17.com-腾讯分分彩必输| www.667485.com-武汉市福彩中心电话| www.751814.com-买世界杯彩票哪个好| www.828225.com-彩票送红包-| www.894357.com-福彩快三过滤工具| www.957602.com-9彩新一代团队计划| www.mu43.com-福利彩票有几种玩法| www.78bm.com-境外可靠足彩| www.7116.cc-5177彩票-| www.039276.com-体彩购彩流程矢量图| www.ds60.com-福彩三地-| www.31fx.com-体彩每周四开什么| www.41fc.com-七星乐彩票真假| www.8649.loan-竞彩乐群英会app| www.788176.com-福彩宝典-| www.887387.com-招彩网-| www.969355.com-彩53领跑者-| www.cp683.com-新快三app-| www.xc63.com-萄京彩票网-| www.54ql.com-贵阳市体彩兑换地址| www.304337.com-公布中国湖南福彩| www.186016.com-玩快三的软件| www.44998.com-99彩票可以提现吗| www.89369.com-人人中彩票不能用了| www.293773.com-688大发快三彩票| www.388553.com-海军迷彩图片| www.728945.com-原创双彩图3d| www.804234.com-如何网购体育彩票| www.879990.com-陕西福彩网双色球| www.941125.com-新疆时彩开奖走势图| www.985486.com-唯彩会看球-| www.cp6781.com-爱彩乐快乐十分开奖| www.45144.com-众彩易购违法吗| www.001994.com-釉彩的主要成分| www.770711.com-时时彩三星中奖规则| www.846131.com-乐乐彩票是真的吗| www.906069.com-中国竞彩比分直播| www.963599.com-竞彩足球.500w| 中彩网www.91233q.com| www.8660.me-五洲彩票平台靠谱吗| www.478481.com-怎么样是足彩双平| www.594474.com-7彩彩票怎么赚钱| www.444252.com-078彩票网站| www.669341.com-彩钢夹芯板原理| www.789754.com-竞彩单关套利| 亿万彩票www.234892.com| www.041255.com-彩票长龙最长多少期| www.6177.cm-天空彩票高手网| www.368669.com-福彩3d太湖猜字谜| www.655155.com-查3d彩票怎么玩法| www.715885.com-乐和彩票最新版| www.790005.com-迪士尼彩ii-| www.861163.com-今日福彩三d字谜| www.922086.com-彩票自动售卖机加盟| www.974586.com-众盈彩-| www.cp5888.cc-2019互联网彩票| www.085338.com-彩票论坛微信公众号| www.4011.cc-至尊博彩论坛| www.96789.cc-竞彩统计概率| www.232302.com-北京福彩快三走势一| www.184115.com-大发快三倍投必死| www.360199.com-南洋彩开奖现场报码| www.82mq.com-移动彩印-| www.69380.com-快三守号划算吗| www.09368.com-彩神iv软件快3| 吉利彩票www.80065d.com| www.el09.com-中国彩吧更懂| www.519035.com-3132分分彩-| www.686332.com-时时彩三期必中计划| www.811839.com-彩坛至尊免费大全| www.85vm.com-彩票平台有漏洞吗| www.004223.com-淘宝快三数据专家| www.059262.com-彩票排列五开奖结果| www.207569.com-时时彩缩水软件在线| www.322322.cc-996彩票下载安装| www.449171.com-彩票计划怎么买| www.525092.com-大小快三-| www.tv59.com-中国彩票大厅| www.901054.com-快3彩票贴吧| www.4203.top-体彩七位数中奖4位| www.36862.cc-幸运彩票计划群| www.044688.com-福彩三d专家预测| 网易彩票www.077wy.com| www.725604.com-福彩三地双胆毒胆| www.800620.com-彩9苹果版下载| www.865622.com-福利彩票站怎么加盟| www.925817.com-彩富网天空彩天| www.969912.com-福利彩票停售了吗| 名门彩www.33997c.com| www.bf01.com-喜乐彩基本走势图| www.ob38.cc-易彩2.0软件下载| www.64wh.com-乜星彩结果-| www.015834.com-乐彩彩票网官网是啥| www.349779.com-3d胆码牛彩总汇| www.011473.com-福利彩票昨天开什么| www.700409.com-网上去哪买体彩| www.830660.com-易彩票手机版下载| www.718185.com-亿宝彩票-| www.pc73.com-彩票追遗漏-| www.654789.com-时时彩怎么避免长龙| www.9382.cn-丅丅彩票-| www.118875.com-彩票可以无限追吗| www.0142.win-色彩构成综合作业|