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.279795.com-三分时时彩计划| www.72274.com-福彩一体机设置| www.75bu.com-彩运彩票-| www.503030.com-球彩友多店铺二维码| www.186702.com-牛彩票开奖直播| www.022864.com-福彩有5d-| www.306034.com-天津福彩一定牛| www.02ex.com-彩虹色的花完整绘本| www.1604.vip-福彩3d今晚预测| www.599986.com-彩票中奖神奇预测术| www.770415.com-彩杠麻将-| www.873744.com-彩票源码平台出租| www.966502.com-宝马集团彩票注册| www.cp3122.com-快三游戏单机版下载| www.q77.shop-双阳黑彩小哈| www.636565.com-特殊符号彩虹| www.010326.com-熊猫彩票-| www.9420.biz-华人彩登录注册| www.879125.com-悦心亿彩app| www.882624.com-易彩国际是什么软件| www.960341.com-ios彩票彩金| 大赢家彩票平台www.810603.com| www.505824.com-黑彩网站怎么举报| www.614896.com-日本30秒彩票玩法| www.858056.com-彩票这东西能玩吗| www.947531.com-福彩视频讲座| www.455269.com-乐彩国际平台注册| www.730045.com-下载12彩票-| www.829353.com-新乐彩说风控| www.905652.com-yy彩票登录| www.985420.com-竞彩稳串三串一| www.rg64.com-4十1彩票开奖结果| www.16uq.com-k彩的邀请码多少| www.91am.com-首彩葡萄酒-| www.2041.com-彩神通软件怎么样| www.7990.top-托班彩虹伞-| www.32051.com-oo8彩票-| www.73377.cc-七星彩怎么抓规| www.d88.online-彩民网高手论坛| www.60ra.com-特区海南匕星彩梦册| www.yo59.com-体育彩票二串一| www.397786.com-七星彩开奖开奖今晚| www.60087.com-头头博彩客户端| www.0610.net-彩票遇到连挂怎么办| www.211112.com-彩界联盟网址多少| www.967484.com-百合网快开彩票骗局| www.852711.com-足彩310报纸发行| www.933370.com-彩坛至尊-| www.em65.com-我想在手机上买彩票| www.n91.cc-彩8app-| www.1647.xyz-红彩会下载安装| www.22761.com-福彩3dqq交流群| www.497373.com-什么是13彩-| www.09971.com-上海福彩中心银彩通| www.il80.com-烟台福彩网-| www.s02.online-菲律宾正规彩票| 奔驰彩票www.69465.com| www.526597.com-私彩非法经营| www.649022.com-巨彩手机官网| www.805411.com-手机玩时时彩害死人| www.919523.com-搭建一个时时彩平台| 500彩票www.66653r.com| www.4610.date-重庆市彩刷流水方法| www.380523.com-七乐彩3月19| www.7127.loan-七彩建盏有毒吗| www.im40.com-广东福彩手机投注站| www.u66.top-彩票游戏合法吗| www.65oy.com-彩票投注站怎么提成| www.0694.cm-彩票机换纸视频| www.ze12.com-春秋彩票下载| www.016155.com-彩票开奖视频道| www.837.org-丨7500乐彩网| www.218600.com-内蒙古快三害死人| www.103724.com-彩运网正规吗| www.022315.com-时时采彩app下载| www.255603.com-彩票七星彩开奖结果| www.366786.com-02838搜彩网| www.485796.com-彩93正规吗-| www.568248.com-福利彩票贴吧论坛| www.652482.com-双色球彩票站开奖| www.735327.com-新快报福彩-| www.812828.com-手机彩铃怎么换| www.887556.com-下彩网客服电话| www.965416.com-中国福利彩票预测| 网易彩票www.140599.com| www.qz75.com-快三是假的吗| www.279272.com-吉林快三坑害多少人| www.507233.com-竞彩猫付费推荐破解| www.593351.com-9彩计划团队| www.02600.com-魔方彩票苹果| www.154.hk-彩虹天堂歌词| www.3321.online中彩网十一选五| www.14031.com-澳门竞彩公司| www.227632.com-福利彩票开奖直播| www.cp631.com-彩神vl-| www.555590.cc-3地乐彩网-| www.655216.com-海南七星彩开奖直| www.793708.com-彩票一夜暴富| www.6864.cn-宝盈彩客服-| www.5687.biz-失控的黑彩1| www.37795.com-开个彩票网站多少钱| www.71cb.com-香港马彩大奖| www.328021.com-福彩3d家彩网论坛| www.444344.com-彩38是黑站吗| www.546463.com-彩票刷流水吧| www.867602.com-彩票代打兼职微信号| www.960041.com-福彩快三长龙助手| 大赢家彩票平台www.730625.com| www.34577.cc-今日七彩奖开奖结果| www.866570.com-昨天的福彩开奖号码| www.954086.com-彩票结果查询| 博亿彩票www.679by.com| www.bd93.com-内蒙古体彩兑奖地址| www.qp21.cc-传统型彩票图片| www.j90.me-南洋福利乐和彩现场| www.025816.com-三3d彩吧图库| www.83799.com-彩票代理靠什么赚钱| www.26589.cc-乐和彩登陆官网| www.76299.com-彩票有收藏价值吗| www.066230.com-重庆时时采彩分析| www.154787.com-足彩任选九场经验| www.877318.com-1228彩票-| www.977130.com-项城彩礼一般多少| www.ih53.com-福彩211路遗漏| www.64458.com-竞彩篮球软件哪个好| www.8372.cc-福星七星彩app| www.114970.com-彩神ii靠谱吗| www.9ov.com-双色彩票推荐号码| www.36787.cc-福彩有大乐透吗| www.50dw.cc-竞彩长期盈利心得| www.3088.me-七乐彩晚上几点开奖| www.644749.com-体彩11选5计划| www.739524.com-快三早上几点开奖| www.0137.net-彩色的填写词语| www.9956.pw-198彩平台下载| www.72677.cc-精彩视频在线观看3| www.20bv.com-彩神网买彩票安全吗| www.036.club-安徽快三奖-| www.075138.com-时时彩彩票开奖| www.661439.com-北京五分彩app| www.1674.org-幸运快三怎么买| 500彩票www.904827.com| www.61779.cc-3d彩票字谜预测| www.316916.com-166网上售彩票| www.400843.com-七星彩和值组合| www.499199.com-彩票任务代打是什么| www.566877.com-彩虹台在线直播网址| www.616856.com-湖南彩礼钱明细表| www.711223.com-彩票预算软件排行榜| www.307.in-多彩网彩票是骗局吗| www.796408.com-尊彩app下载地址| www.2839.cm-彩票今日开奖查| www.995857.com-竞彩足球ios| www.90co.com-彩漂粉主要成分| www.6638.in-荐彩唯彩看球| www.823137.com-搜索彩友网网址| www.983046.com-上海体育彩票中心| www.es74.com-qq7彩票下载| www.30eg.com-彩铅画画简单图片| www.165279.com-体育彩票任五走势图| www.301628.com-6合万彩吧资料| www.974119.com-彩吧图库p3第二版| www.121618.com-怎么看是不是彩票托| www.417628.com-爱投彩票靠谱|