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.131697.com-全国彩礼-| www.1108.love-福彩体彩历史开奖| www.345642.com-网上怎么买福彩| www.0635.wang-安徽快三遗漏好| www.642621.com-三彩女装正品旗舰店| www.768404.com-免费彩铃-| www.863310.com-2月16号体彩| www.962337.com-福彩1360亿元| 如意彩票www.853689.com| www.qy19.com-11选5彩票平台| www.1616.org-彩吧娱乐提现提不了| www.012539.com-19017七星彩| www.493850.com-贩卖私彩-| www.586926.com-国际彩票是骗局吗| www.680210.com-玩彩票软件下载| www.772981.com-最新送彩金-| www.915373.com-开个彩票站挣钱吗| www.995490.com-91竞彩之家改名| www.ih53.com-福彩211路遗漏| www.q00.in-彩票天天彩选四| www.68ba.com-官方时时彩怎么玩法| www.993003.com-竞彩官方app| www.er72.com-大快三破解版手机版| www.016554.com-足彩分析师排行榜| www.115281.com-体彩顶呱刮运8| www.186422.com-乐彩网下载-| www.262179.com-快三有作弊软件吗| www.478575.com-深圳福彩官方网查询| www.7849.biz-吉林快三当庄| www.34089.com-中国彩吧一彩吧论谈| www.83fm.com-幸运彩票平台正规吗| www.15691.cc-中国6加1彩票玩法| www.070953.com-彩票365是否正规| www.683848.com-彩票店app下载| www.813076.com-网络购彩被骗| www.918854.com-澳门博彩税-| 博亿彩票www.626by.com| www.685585.com-福彩3d和值速查表| www.819736.com-福彩3d图谜总汇八| www.908111.cc-七星彩中了两个号码| www.972141.com-彩票数据走势图| www.cp090.com-周易算法算快三| www.790887.com-彩票精英四肖克黑庄| www.854933.com-爱彩平台合法吗| www.934594.com-天天赢彩票登录| www.995413.com-易彩堂诈骗-| www.fj12.com-大发快三是骗局吗| www.10it.com-vivox23炫彩| www.602339.com-游戏厅彩票是干嘛的| www.712424.com-邀请码彩票驿站| www.791110.com-彩票在线机选摇一摇| www.863213.com-新浪彩票双色球竞技| www.951633.com-红彩网络直播平台| 中信彩票www.23579.cc| www.co72.com-彩客旧版app| www.219429.com-福彩6十1开奖结果| www.157073.com-足彩奖金比分上限| www.898289.com-七星彩电动车被偷码| www.930728.com-快三几率多大| www.671696.com-彩宝118下载地址| www.750049.com-中彩彩票怎么注册| www.815831.com-北京七星彩公司网址| www.895862.com-内蒙古快三软件| www.962203.com-体彩11选五山东| www.cp7767.com-江苏快三单双骗局| www.966077.com-体彩打票机键盘图片| www.582386.com-江苏福彩3d快三| www.54zt.com-三分彩票-| www.070061.com-彩神1app合法吗| www.178122.com-彩票快三有口诀吗| www.978212.com-天天福彩开奖| www.400466.com-辽宁福彩35开奖号| www.243600.com-福利彩票怎么选号| www.220566.com-旺彩双色球-| www.023181.com-体彩p3出号走势图| www.246192.com-高频快开类彩票| www.150046.com-期期中彩票结果| www.230252.com-快三区间线-| www.305177.com-七星彩19038期| www.386123.com-体彩283胆拖玩法| www.494342.com-辽阳彩票站出兑信息| www.802385.com-竞彩彩民投注比例| www.916295.com-时时彩关闭了| 天朝彩票www.98599.cc| www.160.me-五洲彩票是真是假| www.488891.com-彩票刷流水不被发现| www.9083.pw-中国彩票一更懂彩民| www.75841.com-大型彩票网站| www.385315.com-湖北七星彩开奖结果| www.793653.com-微信博彩被骗| www.874213.com-彩票搭建平台| www.949509.com-宝丽彩票-| 彩客博www.8667v.com| www.is82.com-一分钟快三下载网址| www.88fs.com-体彩大乐透中奖情况| www.08937.com-东莞体彩兑奖中心| www.024023.com-做私彩-| www.109276.com-足彩北单预测| www.246669.com-新浪足彩资讯搜索| www.033976.com-七乐彩票不给提现| www.947540.com-马云谈彩票-| 爱上彩票www.ascp2.com| www.59331.com-88彩票安卓-| www.392294.com-搜狐彩票平台| www.061101.com-q彩网靠谱-| www.371.live-匕乐彩推荐号| www.198471.com-福彩兑奖中心地址| www.057302.com-湖南福彩中心地图| www.104169.com-彩神ix5分快3| www.261972.com-龙彩彩票-| www.276259.com-大发快三没人举报吗| www.93176.cc-玩快三怎么赚钱| www.99qp.com-怎么研究体彩| www.001824.com-中国体彩有几种| www.122963.com-福彩公益金用途| www.273865.com-上海快三开奖易看懂| 500彩票www.50026p.com| www.06460.cc-福彩3d牛彩网彩摘| www.2116.org-彩票对打套利技巧| www.9246.biz-乐彩怎么充值| www.62259.cc-大赢家时时彩平台| www.018061.com-七乐彩新浪走势图| www.081909.com-最新唯彩双色球宝典| www.820844.com-凉山拆彩钢瓦| www.60cv.com-红彩快三视频网站| www.3019.com-正彩办公用品| www.90644.com-双彩论坛手机版下载| www.735228.com-彩票不符概率| www.229705.com-彩票站点大全软件| www.222650.com-快三缩水-| www.321752.com-彩票复式计算器下载| www.411873.com-彩票现场直播| www.548800.com-宝盈彩票登录| www.199449.com-时时彩独胆方法大全| www.356335.com-168彩票注册网址| www.682623.com-网上哪里能买足彩| www.788107.com-中国足彩网官方下载| www.867181.com-福彩三码最大遗漏| www.936173.cc-那个彩票平台反水高| 购彩在线www.66332p.com| www.5754.org-快三软件开发| www.10813.com-竞彩足球比分投注| www.691553.com-500万彩是真是假| www.815636.com-福彩排三今天开奖| www.881670.com-百姓彩票手机版下载| www.825867.com-吉林传统快三预测| www.911888.cc-天天彩票网开奖结果| www.cp6119.com-中国福彩下载| www.088.com-掌上足球彩票| www.8527.xyz-306体彩下载注册| www.49333.cc-温州彩票店开到几点| www.91221.com-好彩哪种好抽| www.670404.com-手机买彩票违法吗| www.685188.com-近期双彩求开奖结果| www.770714.com-腾讯分分彩邀请码| www.840440.com-竞彩优化是什么意思| www.82382.cc-快三自动计划软件| www.067744.com-时时彩平台搭建开发| www.139207.com-共享彩票下载| www.062445.com-福利彩票预测最准确| www.23446.com-重庆分分彩个位计划| www.250818.com-全能预测彩票软件| www.937756.com-体彩第19007期| 500彩票www.50052j.com|