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天

知道了
彩票123现在叫什么名字 www.241062.com-彩铅花卉-| www.23116.cc-彩票尺寸-| www.143856.com-竟彩足球-| www.300069.com-分分快三算法| www.35fb.com-足彩亚盘看水位技巧| www.58931.com-山西大同彩票中大奖| www.6cc.cc-360足彩竞猜比分| www.555554.cc-彩神汕水论坛| www.50ri.com-直播体彩开奖| www.87256.com-网上彩票何时恢复| www.73486.com-微信好友拉着买彩票| www.728090.com-www.699彩票| www.9864.pw-什么样的传统彩画| www.436000.com-苏州快三线路图| www.569526.cc-天下好彩944cc| www.662821.com-国彩投注-| www.761279.com-118彩票官方网站| www.858506.com-查体彩排列五中奖号| www.931072.com-马来西亚乐和彩官网| www.998381.com-.彩票-| www.dz10.com-福彩通网址是多少| www.857518.com-手机里福彩端| www.973402.com-网上买彩票是套路| www.473666.com-精英网彩票与你同行| www.824865.com-彩票七乐彩开奖规则| www.913861.com-天下第彩票-| www.981047.com-49官方彩票-| www.mv13.com-正规的彩票软件制作| www.32wk.com-彩票过年休几天| www.3177.cn-玩彩了是什么意思| www.019265.com-我要查彩票中奖| www.126463.com-上海福彩银彩通平台| www.34ls.com-七星彩开奖哪个台| www.711931.com-结婚为什么要彩礼| www.748490.com-快彩注册邀请码| www.883516.com-赚佣金精准计划彩票| www.577352.com-网上彩票拿代理加盟| www.670877.com-排列五分析凤彩网| www.0434.vip-彩吧助手缩水工具| www.21317.cc-1305彩票软件| www.60267.com-网易彩网下载安装| www.012035.com-福利彩票世界| www.083120.com-各省快三球走势图| www.148700.com-快三万能追号计算器| www.226795.com-好运彩是合法的吗| www.294810.com-双色彩票开奖结果| www.359339.com-竞彩2串1玩法介绍| www.449062.com-专业玩高频彩输惨了| www.19549.com-彩票app多少钱| www.64184.com-足彩预测好的app| www.028907.com-亿彩堂app下载| www.117440.com-足彩最新分析预测| www.206911.com-凤凰网彩票-| www.308762.com-中国福利彩票投注站| www.790012.com-德令哈福利彩票店| www.903030.com-孕之彩-| www.969989.com-南方双彩网app| www.fy99.cc-福彩作弊国家不管吗| www.739.net-竞彩稳胆推荐| www.247808.com-快三是福利彩票吗| www.273165.com-中国体育彩票理念| www.674508.com-亚洲彩票官方网站| www.789690.com-红彩app可信吗| www.672000.com-彩票意外所得税| www.759087.com-重庆时彩彩开奖结果| www.088940.com-腾讯彩票投注平台| www.2860.vip-彩虹糖有几种颜色| www.90068.cc-788彩票网下载| www.200219.com-彩票数据-| www.524888.com-天下彩網址-| www.802224.com-33372彩票登陆| www.35331.cc-哪里有江苏快三群| www.158874.com-头奖彩票怎么了| www.356249.com-江苏快三追号计划表| www.50om.com-快三坐庄会不会输| www.559897.com-彩票收藏-| www.695138.com-310足球竞彩推荐| www.455422.com-福乐彩票骗局揭秘| www.840506.com-彩妆店中岛装修图片| www.947510.com-大奖网彩票下载| www.999534.com-福彩组三走势图| www.fm40.com-10分快三是真的吗| www.296317.com-福彩假还是体彩假| www.243872.com-酷彩正规吗-| www.103547.com-广东彩票-| www.193314.com-百宝彩湖北快三| www.281365.cc-中体彩网首页| www.08282.com-广东福彩官网手机版| www.0205.cn-赢彩彩票是不是假的| www.253209.com-好彩一最新技巧| www.22707.com-吉林快三开盘犯法吗| www.68850.com-彩票双色球选号| www.798258.com-海南省福彩兑奖地址| www.8185.in-高频彩票时间调整| www.770947.com-彩之家怎么样| www.474591.com-彩名堂快三聊天室| www.579500.com-体彩排列预测结果| www.679153.com-彩票至尊宝典| www.777223.com-排三乐彩网试机号| www.887319.com-网络彩票赌博经历| 金掌柜www.83993m.com| www.561875.com-广东福彩走势图| www.715812.com-306cc彩票网| www.835553.com-体彩软件排行榜| www.949526.com-游戏彩票多少是一分| www.ae00.com-河南体彩河南福彩网| www.654195.com-97彩票能不能赚钱| www.771761.com-昆山快三开奖结果| www.939946.com-快三买和值中奖金额| www.cp7766.cc-中国福利彩票app| www.m84.cn-彩票开奖图-| www.829182.com-足彩微信讨论组| www.vm54.com-上海福彩d4-| www.47of.com-中国体彩双色球| www.4823.xyz-万众彩-| www.874392.com-精彩十分玩法图片| www.973062.com-免费彩虹主站搭建| www.021058.com-湖北省体育彩票官网| www.110523.com-美国强力球彩票| www.434567.com-山西体彩投诉电话| www.110590.com-彩九怎么下载安装| www.026127.com-十分彩一分快三下载| www.18ek.com-超级体彩大乐透结果| www.930.tv-七星彩四个号多少钱| www.4327.vip-浙江福彩中心在哪里| www.119357.com-彩神8网页登录| www.028523.com-乐彩网开奖信息| www.661662.com-足彩对冲技巧| www.90dj.cc-三d彩每期开奖号码| www.2800.com-福彩3d中奖图片| www.018856.com-手机看彩票的软件| www.473783.com-福彩到底是真是假| www.556656.com-彩票真实性-| www.55pg.com-玩彩票最牛的人| www.82185.com-8号彩票多少能提现| www.098098.cc-好运彩彩票幸运快三| www.89to.com-如何举报博彩app| www.871933.com-快三缩水组号| www.979546.com-下载晚晚好彩| www.76dq.com-福彩一周几次开奖| www.1712.org-爱彩乐1分快3| www.146901.com-凤凰彩票插件| www.pv03.com-98彩票犯法吗| www.56ku.cc-重庆时彩后二万能码| www.2381.in-七彩西游记在线豆丁| www.9918.loan-我查询福利彩票| www.649039.com-博彩管理课程| www.726163.com-彩宝贝网双色球预测| www.781564.com-彩票店私自坐庄| www.850426.com-竞彩4×5-| www.906165.com-篡改黑彩数据| www.955266.com-80彩app下载| www.990227.com-77彩票骗局-| www.ai65.com-福利彩票昨晚开什么| www.z31.club-彩票店前景怎么样| www.081116.com-网投快三是什么| www.93853.cc-网易彩票可信么| www.fv52.com-01彩票是骗局吗| www.835582.cc-体彩23选5-| www.qd04.com-彩票要分-| www.607063.com-福彩3d是什么号码| www.678516.com-江苏福彩网论坛| www.745800.com-下载手机天天中彩| www.979549.com-好彩银特醇香烟|