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天

知道了
彩01彩票 www.15238.cc-凤凰快三下载| www.051626.com-星光彩票网站| www.197986.com-彩票开奖大全查询| www.324518.com-7乐彩专家预测号码| www.499839.com-新加坡快彩-| www.585186.com-网易红彩专家预测| www.874724.com-吉林快三倍开奖| www.fn11.com-彩乐乐网彩票| www.481113.com-香港陆和彩开| www.594936.com-福彩3d老虎图| www.690217.com-竞彩单关最新走势图| www.6018.biz-3d彩票攻略-| www.93689.cc-体育彩票3d推荐号| www.180829.com-手机彩票软件排名| www.815878.com-燕赵福彩网排列7| www.914779.com-v98彩票平台| www.cai5611.com北京福彩快三走势图| www.3085.vip-慧盈彩票app下载| www.oh68.com-福利彩票3d字迷| www.668487.com-朋友在国外彩票公司| www.681720.com-合法的网络购彩平台| www.y88.loan-彩漫福利百度贴吧| www.739844.com-132彩票网-| www.809607.com-南国彩票论坛南海网| www.936388.com-足彩唯彩会姜山冷门| 大富豪www.339967.com| www.ry62.com-预测快三-| www.3375.com-彩金和黄金哪个贵| www.565338.com-佛山体彩普君店| www.114356.com-大快发3彩票app| www.220801.com-上海快三计划网页版| www.394589.com-山东省体育彩票| www.562142.com-大公鸡七星彩手机| www.01001.com-彩界精英双毒胆| www.750418.com-豪彩分分彩-| www.288835.com-经典彩票广告语| www.372965.com-玩彩票经验总结| www.506527.com-彩天地娱乐计划软件| www.57533.cc-彩票中奖先汇款骗局| www.028647.com-排列三乐彩网断组| www.105651.com-新浪彩票图表走势图| www.839063.com-微彩娱乐登录网址| www.qp85.com-pc彩票是是什么| www.190363.com-内蒙快三开奖助手| www.176315.com-有没有快三的计划群| www.755.cn-时时彩定和值技巧| www.55441.com-彩博网站-| www.051319.com-上海快三开将结果快| www.671795.com-500彩是正规的吗| www.763529.com-江苏快三玩法介绍| www.878469.com-靠谱的体育彩票| www.336082.com-五分快三是不是私彩| www.280020.com-胜负彩19049| www.5990.biz-体彩大乐透中奖城市| www.520.tv-保定福彩双色球| www.07769.com-中彩那天生字词| www.62620.cc-满堂彩网站北京赛车| www.086558.com-自助彩票机厂家| www.45508.com-微彩站是正规的吗| www.018632.com-福彩3d谜总汇| www.311443.com-快三分分彩如何玩| www.526785.com-澳客竞彩网比分直播| www.68xt.cc-金冠彩票大发快三| www.221908.com-乐点平台大发时时彩| www.951607.com-彩票132网页版| www.642476.com-福彩形象墙图片大全| www.lf5.com-中原彩票一分快三| www.465431.com-快彩网彩票-| www.590587.com-竞彩14场开奖| www.38mr.com-东北彩礼多少| www.2389.in-视讯彩不能玩| www.620921.com-黑马时时彩人工计划| www.715935.com-彩票代购网站妙招| www.798515.com-彩票中奖如何收税| www.871294.com-大家赢彩票站地址| www.926191.com-七星彩澳客网预测| www.979449.com-解福彩臧机图| www.ch9.com-福利彩票发行目的| www.567102.com-彩虹画画图片大全| www.677292.com-江苏体彩竞彩网首页| www.765538.com-入侵私彩平台看数据| www.825022.com-中国体彩助手下载| www.894877.com-网络彩票代投| www.962140.com-彩涂钢板生产厂家| 博友彩www.693119.com| www.900095.cc-288彩票安卓| www.52628.cc-分分彩后三组六| www.039318.com-购彩网是真的吗| www.997487.com-快三之家是不是真的| www.bg02.cc-甘肃省福彩快3| www.vk80.cc-福彩体彩快彩调整| www.896307.com-9购彩下载-| www.987692.com-乐优炫彩手机版下载| www.ys3.cc-送彩票-| www.oe47.com-幸运彩-| www.33qg.com-百合花彩铅画图片| www.167731.com-旺彩app下载| www.838697.com-彩票齐鲁风采双色球| www.898431.com-玩彩票app安卓| www.960350.com-云顶至尊app彩票| www.nq9.com-快三走势图表格| www.35873.com-爱彩乐号码推荐| www.50593.com-博彩评级手机数码| www.241319.com-快三走势一定牛| www.339342.com-深圳彩票中奖者| www.670581.com-新浪体彩开奖| www.751041.com-下载福中彩票网| www.806366.com-申航彩票骗局| www.868537.com-七星彩割码规律图| www.920975.com-中国福彩网上购买| www.969593.com-上海快三推荐号| 尊彩www.756764.com| www.wd40.com-彩票一等奖奖金| www.199519.com-彩票开奖计划网| 9号彩票www.80767n.com| www.902670.com-诺亚彩票-| www.960846.com-933c1彩票下载| 网易彩票www.069wy.com| www.bl66.com-神舟彩票登录| www.qw05.com-吉林省新快三开奖| www.5nl.com-足彩税-| www.47sa.com-手机梦想彩票下载| www.9104.cc-福彩35开j-| www.no53.com-大乐透走图彩吧助手| www.522276.com-香港福彩网-| www.587120.com-彩票倍投盈利| www.98565.cc-qq5分彩-| www.383211.com-体彩19029-| www.981918.com-买大发快三的技巧| www.hb54.com-567彩票下载| www.02br.com-彩虹的七个颜色英文| www.55hd.cc-竞彩店微信交易| www.693187.com-彩票中奖短信恶搞| www.785462.com-美国彩票16亿| www.854758.com-体彩点石成金中奖率| www.921369.com-彩神1app合法吗| www.968047.com-福彩领导犯的什么罪| 68彩票www.68682f.com| www.234147.com-北京快三中奖号| www.08gw.com-体彩六十1-| www.nj29.com-彩票平台送18| www.479119.com-竞彩奖项有封顶吗| www.578497.com-开心8时时彩| www.878504.com-彩票倍投骗局揭秘| www.668426.com-河南订婚彩礼多少钱| www.777583.com-星空彩票苹果版| www.857390.com-利搏彩票是真是假| www.933166.com-网上买快三被骗经历| www.538625.com-时时彩中央新闻| www.18zs.com-中国体彩足彩胜平负| www.808.biz-87足彩官方app| www.f12.me-最新七乐彩中奖情况| www.154144.com-360福利彩票查询| www.029065.com-唐龙说彩怎么关了| www.224062.com-uu快三稳赚计划| www.ch70.com-有幸运快三的网站| www.vp83.com-湖北福彩网彩票| www.18ym.com-今回福利彩票中奖号| www.134058.com-南粤风采好彩1规则| www.m85.com-海口彩票网图版下载| www.52gj.cc-无锡最新彩礼| www.pr7.com-派彩官网-| www.181849.cc-河北快三前三直遗漏| www.485505.com-篮球彩票分析技巧|