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.186667.com-彩票破解论坛| www.580994.com-安卓好彩vip下载| www.733320.com-易彩票是什么彩票| www.832333.com-七彩世界下载| www.907299.com-体彩外围-| www.973292.com-废彩票叠一艘航母| www.cw0.cc-彩票咋选号-| www.9828.site-怎么找附近的彩票站| www.51596.com-时时彩k线图手机版| www.287592.com-网上刷彩票怎么刷| www.148678.com-乐八彩票安卓| www.982560.com-同城彩票官方| www.ft08.com-百盈快三免费计划| www.635501.com-博彩有规律吗| www.730588.com-易彩提现-| www.812861.com-手机彩铃-| www.886381.com-好运来彩票网网址| 奔驰彩票www.509866.com| www.636218.com-彩虹织机织趣网| www.777688.com-乐艺彩票真的假的| www.896603.com-梦见买彩票中五千万| www.580238.com-六开彩结果-| www.a52.space-江苏快三电视走势图| www.58wb.com-长城彩票是什么意思| www.281804.com-时时彩2元开奖结果| www.382856.com-买彩票输50万| www.518830.com-体彩三亿大奖| www.661359.com-彩票数字出现的次数| www.763521.com-拼搏在线彩神通| www.vd00.com-河南快三开奖时间| www.70gt.com-彩票中奖过期怎么办| www.3118.pw-体彩专管员考试试题| www.837783.com-希腊五分彩开奖| www.929126.com-七星彩头尾包码方案| www.997354.com-app下载送彩金| www.fy92.com-酷彩票计划群| www.795901.com-至尊彩注册-| www.908768.com-彩票倍投方法多少钱| www.986310.com-惟博彩票游戏的网址| www.op7.cc-正规彩票软件| www.477997.com-重庆时彩网址| www.9002.cm-博友彩是什么意思| www.055566.cc-彩票有几种类型| www.381545.com-百合网买彩票安全吗| www.280530.com-时时彩app有哪些| www.459939.com-彩世界哪里的平台| www.7626.xyz-香港彩霸-| www.31057.com-有多少人彩票中奖| www.287122.com-彩票投注站申请书| www.385516.com-吉祥彩登陆-| www.518247.com-中国福彩官网客户端| www.618338.com-体彩彩吧-| www.bq92.com-彩票走势图app| www.192471.com-江苏快三技巧规律| www.273483.com-福彩中心在哪| 日彩网www.rcw8866.com| www.59852.com-微彩软件-| www.sq7.cc-内蒙快三助手电脑版| www.sv85.com-佛法求财中彩票| www.49ww.cc-体彩排列三布衣精华| www.0113.top-体育彩票有几种形式| www.08vd.com-三d试机号彩经网| www.269683.com-581彩票网-| www.28ln.com-三彩代购-| www.41rz.com-首页一竞彩网| www.312291.com-体育彩票排列5| www.394828.com-周五那种彩票开奖| www.619984.com-竞彩盘口分析技巧| www.926079.com-乐和彩票靠谱吗| www.983493.com-xy幸运彩票-| www.cp8663.com-福彩3口开奖今天| www.fc9.com-幸运分分彩网| www.f67.net-福利彩票原中心主任| www.ru23.com-手机彩票破解器| www.463122.com-东方亮彩工资怎么样| www.603373.com-六选一彩票-| www.707358.com-彩票是人为控制的吗| www.785315.com-关于彩民中奖文章| www.859320.com-彩票一号店-| www.919761.com-彩票打印机原理| 大赢家彩票www.399210.com| www.oj08.com-中国福利彩票基诺| www.6952.pw-七星彩千位杀号定胆| www.49648.com-足彩工作室团队招聘| www.525682.com-重庆时时彩漏洞刷钱| www.723208.com-彩票走势网126| www.789700.com-竞彩被骗套路| www.867508.com-体彩停售时间| www.925500.com-旭彩网app-| www.983709.com-彩票对刷套利| www.cp1800.com-福彩快3下载安装| 吉利彩票www.80065c.com| www.ja32.com-998彩票app| www.09jd.com-云彩店邀请码| www.253352.com-好彩妹扮演者| www.529197.com-彩虹糖广告-| www.659406.com-体彩七星彩大奖| www.cai163.com-福彩5d开奖结果| www.970914.com-彩票真能中奖| www.91308.com-好彩粉色爆珠什么味| www.067899.com-彩票平台怎么找| www.53pj.cc-彩票大乐透查询结果| www.17yz.com-七乐彩万能号码| www.87kj.cc-彩民之家论坛高手榜| www.2454.xyz-手机怎么够买彩票| www.8172.xyz-天下彩49cc-| www.120723.com-神彩通网站-| www.908.tv-买彩票会赚钱吗| www.267169.com-胜负彩直播-| www.331094.com-河北彩票app| www.16768.com-116彩票下载| www.561958.com-双赢彩票安全可靠吗| www.148911.com-关停的彩票客户端| www.220263.com-中国福彩开奖结果| www.278818.com-体彩e球彩开奖| www.961047.com-时时彩顺龙还是反龙| 中国福利彩票www.34788c.com| www.hm90.com-旺彩预测软件| www.726361.com-体彩五星彩-| www.830262.com-和乐彩票软件| www.906233.com-快三输的家破人亡| www.966015.com-彩票怎样看-| www.cp6822.com-浙江快三-| www.3708.cc-休彩排三带连线| www.ix16.com-辽宁全运彩-| www.730319.com-内蒙古彩民中奖| www.791340.com-时时彩后四做号软件| www.879400.com-彩富网免资料大全| www.946995.com-重庆全天时时彩计划| www.985288.com-体彩竞彩网计算器| www.aa5.cc-双彩-| www.7ee.cc-足球彩票怎么看盘| www.313.cn-彩票中五元怎么兑奖| www.635786.com-大型时时彩投注网| www.705901.com-广东福利彩票兑奖| www.74055.com-中国彩吧3d开奖号| www.014375.cc-新浪七星彩-| www.59789.com-百乐彩注册-| www.98509.com-分分彩是真吗| www.072933.com-凤凰彩票网址是| www.7036.biz-985彩票-| www.663637.com-乐彩直播间-| www.730531.com-彩票套利论坛| www.785994.com-全民福利彩票cp| www.896977.com-中国优彩网-| www.951919.com-彩天下票黑不黑| www.vd86.com-大发快三彩票邀请码| www.10gq.com-中国体彩网排三预测| www.53705.cc-盈盛国际时时彩| www.666174.com-彩票返亏损的平台| www.734468.com-3d胆码预测凤彩网| www.796906.com-彩票中奖走奇门下载| www.860449.com-体育彩票电脑| www.903990.com-租彩票app-| www.951642.com-趣头条彩票平台| www.984600.com-炫彩粒子-| www.cai910.com-体彩网-| www.116096.com-乐彩三d论坛静态版| www.852.com-彩神争覇app| www.5189.biz-天字彩票与您同行| www.967346.com-微信体育彩票合买群| 天玺彩票www.308550.com| www.170849.com-青海福彩快三今天| www.234887.com-福彩论坛讨论区|