QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > swiper响应式全屏banner图片滚动轮播代码

原创商用 swiper响应式全屏banner图片滚动轮播代码

jQuery基于swiper.js库制作响应式宽屏的banner图片文字滚动轮播,支持触屏滑动切换。适用于响应式网站图片布局展示代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/swiper.css" />

2、head引入js文件

<script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
<script type="text/javascript" src="js/swiper.js"></script>

3、body引入HTML代码

<div class="wqd-section-three">

	<div class="section-three-fix">
		<h5 class="animate-img wqd-h5 animate-text" data-lazy="lazy">用户口碑推荐</h5>
		<p class="animate-img wqd-p animate-text" data-lazy="lazy">百万企业信赖推荐,市场口碑零差评,性价比高</p>
		<a href="#" class="animate-text wqd-btn-blue animate-btn" data-lazy="lazy">立即创建</a>
	</div>
	
	<div class="section-three-box">
	
		<div class="section-box-title">
			<em></em>
			<em></em>
			<em></em>
		</div>
		
		<div class="section-img">
			<img src="images/sectoin-im3.jpg" width="100%" alt="" style="opacity:1;">
			<img src="images/section-bg3-61.jpg" width="100%" alt="">
			<img src="images/section-bg3-21.jpg" width="100%" alt="">
			<img src="images/section-bg3-31.jpg" width="100%" alt="">
			<img src="images/section-bg3-71.jpg" width="100%" alt="">
			<img src="images/section-bg3-51.jpg" width="100%" alt="">
		</div>
		
	</div>
	
	<div class="slipe-box">

		<div class="bannar">
		
			<div class="slipe-left"><img src="images/banner-arow.png" alt="" /></div>
			<div class="slipe-right"><img src="images/banner-arow.png" alt="" /></div>

			<div class="swiper-container slider-two">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">太清凉茶甜品网站需要展示产品色香味的特色,微企点的强大的页面布局功能和参数调整,非常专业展示了产品的特色,浏览体验非常好。</p>
							<h6 class="animate-text" data-lazy="lazy">太清凉茶甜品 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">非鱼是一个壁画墙绘网站,需要炫酷展示产品。微企点的动态交互设计非常好用,就算你完全不懂代码,那种漂亮的边栏弹出、鼠标停留展示多层内容等动画特效,也可以轻松实现。</p>
							<h6 class="animate-text" data-lazy="lazy">非鱼墙绘 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-1.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">画家张路华的个人网站,直接采用微企点预设的元素组件、通栏、单页、模板,自由搭配,灵活替换,大大提高了建站效率,展示专业炫酷。</p>
							<h6 class="animate-text" data-lazy="lazy">张路华官网<span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-2.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">比较了不少建站工具,发现微企点是建站平台中操作便捷,设计风格也是时下时尚的,非常符合领思官网的定位和审美。</p>
							<h6 class="animate-text" data-lazy="lazy">领思云  <span class="slider-auther">CEO 郭雨剑</span></h6>
						</div>
						<img src="images/section-bg3-3.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">山里鲜是一个电商网站,对于网站功能的要求高。微企点内外兼修,除了能实现炫酷展示,还有强大的网站功能,满足营销推广所需。</p>
							<h6 class="animate-text" data-lazy="lazy">山里鲜 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-6.jpg" alt="" />
					</div>
					<div class="swiper-slide">
						<div class="section-three-item">
							<p class="animate-text" data-lazy="lazy">用微企点做了一套内画鼻烟壶网站,这是一个对设计师友好的建站工具,让不懂代码的人也能做网站。功能简洁易懂,小白大牛都适合。</p>
							<h6 class="animate-text" data-lazy="lazy">鼻烟壶 <span class="slider-auther"></span></h6>
						</div>
						<img src="images/section-bg3-5.jpg" alt="" />
					</div>
				</div>
				<div class="swiper-pagination swiper-pagination-two"></div>
			</div>
			
		</div>
		
	</div>
	
</div>


<div style="height:540px;"></div>


<script type="text/javascript" src="js/banner.js"></script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
金福彩票 www.712569.com-网上买时时彩违法吗| www.072805.com-聚富彩app-| www.611718.com-彩虹岛w台服下载| www.7wx.cc-离婚后彩票中奖算| www.120448.com-燕赵福彩排列五官网| www.237548.com-幸运快三全天走势图| www.337743.com-超级七星彩开奖直播| www.424999.com-七彩语文杯-| www.5177.cm-韩国中奖彩票| www.305155.com-怎么去彩票店买彩票| www.436062.com-海南七星彩梦册大奖| www.576471.com-汉中福彩二等奖| www.221131.com-玩福彩会一直赢钱吗| www.351251.com-真有人买彩票中奖吗| www.310500.com-公益体彩网怎么样| www.921969.com-365彩票安卓| www.055052.com-5分快3彩票-| www.138839.com-同城彩票可靠吗| www.72533.cc-彩票37期-| www.245188.com-竞彩网计算器500| www.364009.com-刚力彩芽下海了吗| www.890163.com-时时彩计划下载安装| www.md54.com-北京快三选号技巧| www.769207.com-国冠彩票-| www.14df.com-如何七星彩机选一注| www.771998.com-时时彩六码怎么倍投| www.865135.com-河南快三合值表| www.lr30.com-重庆老时时彩360| www.431161.com-快速时时彩娱乐| www.999471.com-跑马彩票3分钟计划| www.iz06.com-华夏彩票安全吗| www.48523.com-世界杯竞彩足球软件| www.676.cm-精准时时彩计划带人| www.967114.com-体彩抽成-| www.cn68.cc-温州快三走势图| www.c39.top-福彩快3到几点结束| 福利彩票www.99677i.com| www.37tj.com-七星彩前4位| www.482299.com-彩票七位数开奖时间| www.582566.com-体彩屋网址-| www.673859.com-159彩票登录| www.749506.com-中彩网怎样玩更赚钱| www.820768.com-附近出售二手彩钢瓦| www.896284.com-瑞彩网是正规网站吗| www.973248.com-金利彩票下载安装| www.ya64.com-q彩网计划-| www.46cb.com-排列三体彩百度贴吧| www.898084.com-彩吧彩票下载| www.968164.com-上海福彩快3结果| 日彩网www.rcw8877.com| www.kj91.com-双色球助手幸运彩票| www.n41.net-凤凰彩票网骗局吗| www.61eg.com-掌游彩台球大师| www.1823.cm-体彩前三直开奖结果| www.s77.net-彩票3d开奖日| www.4283.org-好彩客v111网| www.vh10.com-买体彩的软件| www.2910.cc-澳门彩票首页| www.4561.top-湖北快三抓豹子技巧| www.60hc.com-老北京彩梅布鞋| www.697605.com-海南七星彩如何包码| www.2585.com-大兴彩票理财投资| www.30872.com-新浪爱彩双色球预测| www.uh34.com-谁有彩票邀请码| www.111438.com-彩票漏洞刷钱软件| www.788684.com-体育彩票官网客户端| www.8137.bid-澳门三分彩赚钱吗| www.449114.com-华夏五分彩-| www.759206.com-福彩图库网址是什么| www.861153.com-5分⑥和彩开奖| www.941386.com-中福时时彩官网| 金冠彩票www.49956k.com| www.fv79.com-英国时时彩官方| www.15wj.com-幸运彩河南福彩官网| www.757393.com-甘肃快三和值跨度表| www.557151.com-奔驰彩票是私彩平台| www.856083.com-极速一分彩开奖号码| www.ur74.com-中国快三老快三| www.994051.com-看福彩三地图迷大全| www.er13.com-官方北京快三app| www.5137.biz-福建体彩36走势图| www.21121.cc-c彩61网站-| www.826283.com-33彩票33cc彩| www.ls69.com-拉萨快三开奖结果| www.cp8177.com-快三守号打法| www.5211.in-中彩3d开机号今天| www.162072.com-乐汇彩网站-| www.680034.com-大乐透彩票二元网| www.878972.cc-福利彩票几位数选| www.30di.com-云南时时彩开奖软件| www.616496.com-7彩网安全吗| www.136234.com-梦想彩票登陆网址| www.538131.com-利彩彩票是什么意思| www.640868.com-福建福彩时时开奖| www.658617.com-login中彩乐| www.772913.com-单投滚球彩票| www.846832.com-飞龙在天竞彩推荐| www.943022.com-手机淘宝如何买彩票| 500万彩票www.35155n.com| www.130611.com-时时彩跨度规律| www.904858.com-竞彩足球500w| www.453626.com-新加坡彩开奖记录| www.561522.com-十分江苏快三技巧| www.654344.com-彩之源彩首页| www.762216.com-好的竞彩足球软件| www.866146.com-5年信誉彩票| www.566356.cc-体彩任3开奖时间| www.662852.com-竞彩怎么买怎么死| www.755656.com-6s彩膜-| www.842139.com-足彩直播胜负直播| www.97847.com-彩票网站返点最高| www.667033.com-33cc彩票-| www.766668.cc-购彩大厅快三| www.50dt.com-易彩平台客服| www.185908.com-五分快三怎么玩| www.606756.com-彩票经典段子| www.617990.com-快三邀请码谁有给个| www.675990.com-国家彩票官方网购买| www.752692.com-足彩加怎么样| www.813978.com-华亿彩票是黑平台吗| www.878824.com-江西快3彩票下载| www.951614.com-一定牛彩票停售原因| www.cai628.cc-彩票计划群骗局| www.mq06.com-时时彩平刷稳赚原理| www.957256.com-彩票软件怎么开挂| www.999806.com-广东好彩一最准预测| www.yc1.com-黑彩票平台-| www.8489.com-万利彩票登陆| www.525293.com-网易彩票直播开奖| www.650768.com-陈流水彩-| www.716237.com-快三2倍中奖多少钱| www.781990.com-福彩3d绝对布衣3| www.842405.com-体彩未来趋势| www.907158.com-福彩是要填几位数| www.960683.com-天天福彩是什么意思| www.gw07.com-彩16苹果下载地址| www.800964.com-大众彩票源码| www.892141.com-竞彩足球历史开奖| www.954940.com-黑客攻击时时彩| 双赢彩票www.sytg8.com| www.779237.com-五百彩票开奖查询| www.260196.com-彩票一等奖兑奖地点| 手机购彩www.257588.com| www.nz07.com-快三投注哪个平台好| www.220453.com-天天中彩网app| www.37710.com-下载7星彩例表| www.344187.cc-手机时时彩票模拟器| www.365948.cc-手机彩票彩29票| www.490067.com-体彩买法-| www.34ic.com-手机彩票摇摇乐| www.067.date-彩民交流qq群| www.4851.vip-山西体彩诚招投注站| www.3581.com-稳定赠送彩金平台| www.50ia.com-好用的体彩软件| www.725874.com-亚上彩合法的吗| www.507818.com-19043期7星彩| www.190363.com-内蒙快三开奖助手| www.040918.com-基诺型彩票的漏洞| www.366360.com-国产彩电哪个品牌好| www.490907.com-淘宝可以投注彩票吗| www.46wo.com-广西投资指南彩报| www.5272.com-搜狗彩票排五走势图| www.29515.com-天天彩票网四不像| www.yd33.cc-好彩店彩票-|