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.541378.com-怎么做线上彩票代理| www.716528.com-海上日落彩铅画| www.811913.com-中国体育彩票福建| www.889712.com-体彩排列三独胆双胆| www.962603.com-大发彩票手机版本| TT彩票www.526013.com| www.lw01.com-竞彩篮球app| www.q82.cc-赌博快三-| www.59pl.com-体彩兼营店什么意思| www.1340.vip-500go购彩-| www.38183.cc-河北福彩官网| www.91372.cc-焕彩美白面膜| www.063302.com-开个体彩店赚钱吗| www.238682.com-网上玩分分彩必输| www.328993.com-广西中奖彩票被调| www.418641.com-头奖彩票最新消息| www.532461.com-夏侯姬和星彩| www.660965.com-众彩网彩票门户站点| www.775053.com-网易人人中彩票没有| www.881490.com-8k彩票官方网站| 大玩家彩票www.84499r.com| www.966362.com-澳门五分彩怎么样| www.yf4.cc-快乐彩下载安装| www.l74.cc-彩81彩票苹果下载| www.61zu.com-彩31黑平台-| www.3212.shop-福彩中福-| www.9546.top-海南四星彩论坛| www.89972.com-中国七星彩直码| www.053820.com-足彩19042任九| www.168786.com-安徽快三开奖结果快| www.293956.com-福彩东方6十1玩法| www.395019.com-彩虹app制作| www.533055.com-彩票实战讲座四| www.650379.com-nba博彩分析| www.774558.cc-公牛彩票大厅| www.900082.cc-江苏快三能挣钱吗| www.969524.com-快三2同号技巧| www.20lj.com-彩虹6号第三年| www.4067.com-福利彩票会员告诉我| www.20480.com-湖北快三彩乐乐推荐| www.93837.com-足彩欧赔-| www.069708.com-查福彩开奖结果查询| www.195523.com-湖壮快三一定牛| www.272041.com-福彩内蒙快3走试图| www.424712.com-大赢家彩网-| www.623576.com-彩票六等奖-| www.708377.com-杭州体育彩票直播| www.797360.com-500彩票怎么用| www.972480.com-优彩彩票平台| www.cm18.com-大发快三怎么玩赢钱| www.xj79.com-好彩堂跑狗图玄机图| www.32rh.com-体彩3地-| www.1921.xyz-越南时时彩人工计划| www.8286.biz-南昌彩票中奖| www.599962.com-一直买一注彩票| www.723320.com-福彩字谜画谜总汇| www.830300.com-机选一注福彩3d| www.914183.com-快三数据分析软件| www.983884.com-1980彩票下载| www.uh1.cc-百宝彩河北快3| www.tq35.com-盛世彩票吃大赔小| www.39py.com-重庆时时彩倍投群| www.2448.xyz-二分彩免费计划| www.9988.tv-纹绣彩妆店名字大全| www.60148.cc-精彩玩法画面刺激| www.039751.com-华彩彩票可信么| www.158473.com-重庆时时彩钻石团队| www.285267.com-快三豹子间隔期| www.399593.com-南海网七星彩票论坛| www.521516.com-高频时时彩新规定| www.592535.com-香港彩报-| www.685284.com-福彩3d彩票安装| www.763479.com-福彩生肖6十1中奖| www.937827.com-彩票预测软件怎么样| 皇家彩票www.hj1991.com| www.hn99.com-江苏快三中奖| www.a56.live-足彩心得-| www.43gw.com-福彩十五走努图| www.3332.in-彩票2元网体彩| www.02546.com-福彩3d二元彩票网| www.87855.cc-华阳彩票网页| www.040937.com-快彩网彩-| www.348079.com-众乐彩邀请码| www.555862.com-六爻彩票书籍| www.678533.com-吉林快三下一期预测| www.783036.com-保定体彩吧-| www.884424.com-五行数字和彩票| www.973085.com-彩虹六号新手教学| www.az85.com-牛彩网新彩吧| www.uh95.com-全民彩票合法| www.12de.com-欢腾彩票app| www.0734.in-博发彩票怎么样| www.8849.biz-男子算彩票概率获刑| www.51163.cc-彩之源骗局-| www.038069.com-49彩票官网平台| www.138887.com-百盈快三秘籍| www.267516.com-打彩票技巧-| www.367884.com-七星彩小说所有番外| www.467033.com-彩票几点封机| www.555348.com-app计划彩-| www.650232.com-南京彩票兑奖地址| www.768883.com-天猫彩票提不了现| www.886723.com-中国福彩是骗局吗| www.961937.com-三彩服饰品牌| 吉利彩票www.80065y.com| www.em42.com-昨天快三走势图上海| www.c75.in-彩经网彩票工具下载| www.40gz.com-彩礼超两万-| www.1748.vip-鸿彩直播花儿| www.9468.org-七星彩够力长条| www.61927.com-领航彩票软件| www.047377.com-赢钱就到赢钱彩| www.149975.com-掌中彩一福利彩票| www.267830.com-竞彩足球必发指数| www.369947.com-178彩票是真的吗| www.496305.com-韦德彩票平台| www.570567.com-好彩五分快3| www.657962.com-新利彩票是骗局吗| www.970109.com-下彩网是真的假的| www.ya33.com-彩票号码25怎么买| www.27wp.com-分分彩总和大小技巧| www.944.vip-澳门5分彩开奖规律| www.5140.in-彩票网加盟店| www.01191.com-精英彩票计划| www.133361.com-梧桐彩票app下载| www.412825.com-体彩足彩竞彩计算器| www.555041.com-彩票站改革背后| www.753573.com-排五中奖彩票图片| www.877576.com-彩票开奖结果排列3| www.962932.com-今日福彩丹东全| www.bg29.cc-赢家彩票注册邀请码| www.wj85.com-怎么看快三要出长龙| www.32cf.com-彩虹头像女生| www.578.bid-彩票计划跟投| www.5424.com-新粤彩报纸网址| www.07872.com-中彩那天的课文原文| www.81274.com-4949天空彩票| www.059663.com-福利彩票中心主任| www.137309.com-q彩网快3-| www.224155.com-快三怎么打容易中奖| www.285342.com-彩票数据中心| www.420097.cc-湖北省体彩总局主任| www.533370.com-体育彩票365安卓| www.652757.com-怎么快速查彩票中奖| www.762214.com-奇门遁甲测彩票实例| www.860661.cc-冀彩宝站主平台注册| www.922859.com-彩钢板围挡施工方案| www.978729.com-好彩一投注技考| www.ec23.com-彩票注册-| www.um54.com-3d彩宝网金胆| www.03lt.com-港彩投中心-| www.66sl.com-玩彩票输钱能报案吗| www.0687.com-体育彩票篮球彩票网| www.16898.cc-全国联销图彩迷天地| www.57256.cc-苹果哪里下载彩77| www.030345.com-彩票走势图大赢家| www.113337.com-手机体彩害死多少人| www.169796.com-内蒙古快三一定牛网| www.307547.com-派彩每日推荐走势| www.390082.com-彩票中十万-| www.551238.com-彩票走势图南方网| www.625444.com-全民彩票真假问题| www.682554.com-自助彩票售卖机| www.749177.com-彩虹100-|