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天

知道了
百盈PK10 www.943988.com-c彩99-| www.937858.com-必赢彩票技巧| www.xg77.com-七星彩中奖规则图解| www.341103.com-拉萨福利彩票中心| www.537869.com-云彩宝鸿运彩票网| www.312181.com-胜负彩app-| www.038379.com-彩票49倍下载| www.175961.com-福彩快3中奖助手| www.02350.cc-鸿鼎彩票网站| www.62292.cc-大家乐时时彩网址| www.682658.com-市彩票发行中心| www.802466.com-吉林市九站彩票| www.879961.com-陕西福利彩票店| www.967213.com-下载体彩481| www.cp6123.com-中彩彩票网-| www.7080.site-七彩衣坊-| www.sn95.com-五星彩是正规的吗| www.735505.com-乐透是彩票-| www.832708.com-彩77官网登录| www.923337.com-福彩关门-| 彩世界www.99788j.com| www.181306.com-快三和值算法| www.6503.top-斗牛彩票主管| www.906601.com-彩票店名字-| www.450059.com-乐和彩wap-| www.925299.com-体彩大透乐杀号定胆| www.fp75.com-河南快三玩法规则| www.887120.com-22彩票骗局-| www.cp8868.com-999彩票app-| www.971680.com-亿发彩票安全么| www.l39.cn-河北福彩三d诗| www.075342.com-成功彩票注册| www.172720.com-贵州福彩快3开奖| www.652300.com-福彩双色球大小比| www.773946.com-彩博888官网下载| www.918270.com-海南七星彩玩法介绍| www.045967.com-福利彩票投注站申请| www.866718.com-昨天的福彩开奖号| www.554806.com-七星彩组合多少注| www.di7.com-5分钟一开的彩票| www.215.red-3037玩彩-| www.7651.xyz-新宝3彩票平台下载| www.684092.com-体彩竞彩销售实体店| www.414110.com-精彩什呈-| www.922519.com-人人竞彩软件| www.316308.com-竞彩店申请-| www.r07.net-网上能买体育彩票吗| www.014.me-福彩33期中奖号码| www.9004.in-123体育彩票| www.697330.com-2019福彩休市| www.231305.com-中中彩票下载安装| www.150252.com-37彩票app-| www.576988.com-好彩彩票官网| www.68657.cc-彩票100本回血| www.110640.com-中彩手彩票客服电话| www.276309.com-七乐彩中奖查询表| www.130705.com-新婚姻法退彩礼| www.008944.com-qq手机彩票-| www.357200.com-福彩led门头| www.1063.wang-彩名堂跟哪种最好用| www.768887.com-天猫国际城彩票| www.lm43.com-2020中彩吧-| www.632028.com-七彩虹机箱-| www.cp0328.com-软件黑客破解彩票| www.it07.com-竞彩网是合法的吗| www.388782.com-乐米彩票软件下载| www.558734.com-彩c02-| www.729011.com-3d南方双彩-| www.820888.com-3d牛彩彩摘网| www.325331.com-海南彩票四码定位| www.441558.com-北斗彩票分析预测| www.2455.cm-足彩稳赚买法| www.111513.com-盈彩彩站官方下载| www.87278.com-33彩票苹果版| www.kn10.com-重庆竞彩快3| www.409.xyz-湖南中彩票5个亿| www.891086.com-猜灯谜猜一体彩名词| www.963922.com-彩虹周杰伦2007| 500万彩票www.39500c.com| www.910291.com-3d胆码预测家彩网| www.972460.com-优彩彩票安卓版下载| www.so88.cc-虚拟足球e球彩| www.499012.com-彩票网站投注兼职| www.588611.com-七星彩明天开奖吗| 彩票控www.7777hv.com| www.273729.com-福彩双色球规划| www.524520.com-福彩3d组3技巧| www.315505.com-七彩假期付款骗局| www.123225.com-欢乐彩app网址| www.393972.com-彩库宝典全年资料| www.484830.com-分分彩五分彩| www.568151.com-我在豪彩平台买彩票| www.290086.com-香港彩库宝典| www.yf3.cc-1分彩稳赚技巧| www.928932.com-中福彩票黑平台| www.04sk.com-人人竞彩足球| www.11529.cc-8亿彩app是什么| www.017628.com-福彩三地两元网| www.827767.com-中国彩网站-| www.8682.vip-体彩19042期| www.073361.com-网上怎么购买彩票| www.145016.com-体彩排列五走势新浪| www.325230.com-查询体彩排列三字迷| www.091365.com-全民连中彩票| www.004096.com-动物彩票怎么玩| www.026781.com-宝盈三分彩全天计划| www.fk53.com-湖北快三开奖定牛| www.440.tv-够力七彩票奖表下载| 中国福利彩票www.34788w.com| www.380060.com-名人堂彩票软件| www.275223.com-168彩票真的吗| www.c96.cc-偶像彩票开奖情况| www.65ew.com-老杨说彩专栏| www.0374.vip-快三醉人的花香分解| www.7728.pw-天天分分彩合法吗| www.58100.com-2018彩图库彩图| www.99135.com-重庆彩全天实时计划| www.069802.com-河北快三多长时间| www.181216.com-中彩网合法吗| www.289707.com-福利彩票往期| www.378688.com-天天福彩软件下载| www.0226.xyz-彩神通试机号金码| www.32fo.com-星期天哪些彩票开奖| www.9039.com-怎么查询福彩站点| www.691702.com-在彩票-| www.571260.com-彩票好运3好运4| www.807832.com-有什么好的竞彩体育| www.00401.cc-彩票改号事件| www.34bm.com-966彩票-| www.73613.com-海南彩查询-| www.947980.com-众彩网迟丽颖| www.988783.com-时时彩前三复式计划| www.fo96.com-今日竞彩足球推荐| www.yq66.cc-体彩七位数怎么算的| www.29nu.com-彩铅画动漫人物男生| www.0003.link-t135cc天空彩| www.5291.net-海南七星彩机选| www.395081.com-彩虹代刷社区官网| www.609029.com-赛后结果及派彩| www.735747.com-五分快三违法吗| 彩多多www.78949l.com| www.528708.com-福彩3d迷解-| www.704931.com-下载福彩官网3d| www.565522.com-99彩吧开奖结果| www.cz34.com-足彩分析师麦克老白| www.o16.cc-豪彩娱乐-| www.385906.com-彩票123下载地址| www.cp408.com-分分快三有亏钱的吗| www.513010.com-化彩社区交流大厅| www.712224.com-时时彩后二杀码思路| www.819238.com-如何成为彩票高手| www.982555.com-33福彩网-| www.kh66.com-福彩p62走势图| www.056398.com-雷州七星彩梦册查码| www.be10.com-兼职刷彩票赚佣金| www.0776.bid-258篮球竞彩网| www.999699.com-长沙彩票中心在哪里| www.x66.top-彩票中奖需要福报| www.291946.com-彩票兼职刷流水| www.024016.com-为啥有人做私彩代理| www.215888.com-湖北快三害死人| www.49799.cc-贵州快三号码走势| www.064866.com-8年稳定私彩平台| www.622015.com-壹号彩票app下载|