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天

知道了
彩01彩票 www.882918.com-快彩网平台-| www.8290.vip-盈彩团队全天计划| www.80845.com-竞彩qq群-| www.556677.com-七星彩计算器| www.690118.com-足球胜负彩预测新浪| www.791857.com-足彩8串1冷门| www.752020.com-我想中彩票一等奖| www.118721.com-彩票大乐透预测| www.589219.com-七星彩冷热-| www.78389.cc-足彩加奖-| www.076188.com-投资达人彩票平台| www.592808.com-故宫釉彩大瓶展出| www.532.website搜索福星中彩网止| www.5816.top-亚彩会登陆最新版本| www.106120.com-竞彩外围投注app| www.263583.com-中彩网3d试机号| www.454200.com-竞彩网258官方网| www.223852.com-竞彩比分结果| www.238503.com-彩票的托是怎么样的| www.444363.com-大地彩票送彩金18| www.010895.com-易迅彩票app| www.69ln.com-网络快三购买技巧| www.8381.xyz-润彩气垫防晒bb霜| www.056586.com-河北彩票开奖中心| www.kw68.com-彩票争霸下载安装| www.018053.com-体彩7星彩合买| www.271374.com-丰彩网彩票真实吗| www.963327.com-淘彩票大发快3官网| www.fi59.com-江苏快三计划精准群| www.060797.com-快三1.98的平台| www.220617.com-彩神几个官网| www.301496.com-网易大乐透彩票预测| www.371925.com-国家官方彩票有哪些| www.769103.com-足彩任九胆拖投注| www.2969.in-金祥彩票官网网址| www.04446.cc-微彩国际骗局| www.122945.com-寻找彩票团队| www.240843.com-北京福彩一定牛| www.114775.com-旺旺彩下载-| www.128744.com-彩民在线-| www.895611.com-9999pp彩票-| www.991780.com-分分彩百分百稳赚| www.75736.com-老猫看彩快讯| www.071551.com-rrz彩票-| www.52dd.com-儿童水彩笔-| www.35476.com-五福彩票软件| www.98581.cc-qq分分彩投注平台| www.9388.in-卖彩票怎么操作| www.85898.cc-彩旬美果569| www.003574.com-e体彩足球竞猜| www.515244.com-七星彩南国彩票社区| www.666957.com-乐彩投资靠谱吗| www.678528.com-下载旧版彩视| www.922159.com-彩礼钱一般给多少| www.978987.com-彩票投注站彩| www.uo85.com-天天彩票论坛社区| www.801019.com-彩金铂金黄金价格表| www.931130.com-色彩构成图片| 吉祥彩票www.715934.com| www.49935.com-新浪彩票世界杯| www.788725.com-nba竞彩篮球| www.876575.com-3d天天彩-| www.979521.com-龙彩居士排列三预| www.gr34.com-广东好彩1开奖| www.0125.vip-彩色是几种颜色| www.zd18.com-红牛彩票最新报道| www.51fw.com-七星彩工具-| www.306934.com-q彩网是真的吗| www.27191.com-安卓版3彩票| www.69381.com-要快三什么时候守号| www.083730.com-福利彩票精准预测网| www.229677.com-中国体彩网官方首页| www.338800.com-优彩网注册-| www.469718.com-网络私彩套庄家钱| www.569367.com-皇家科技彩库宝典| www.656840.com-中彩网专家预测| www.737658.com-金彩网是正规的吗| www.817616.com-电脑福利彩票| www.926350.com-七乐彩除5走势图| www.17on.com-体彩大超级大乐透| www.115164.com-彩色混凝土压模| www.522536.com-分分彩开奖统计数据| www.608344.com-3d彩票34期-| www.0118.org-彩票如何看小黑点| www.878413.com-彩票万能公式脚本| www.e67.shop-乐和彩票官网| www.820024.com-微博买彩票怎样兑奖| www.920966.com-河北福彩网站| www.cai0711.com皇都彩票快3| www.99fl.com-了d彰彩吧图库| www.031826.com-釉下五彩瓷特点| www.777741.com-易彩官网注册账号| www.0494.com-钻石彩票官网| www.806265.com-559彩票-| www.927115.com-红旗彩票快三技巧| www.990682.com-竞彩让平规律| www.ag16.com-福利彩昨天开奖号码| www.xk87.com-鑫彩彩票平台| www.820663.com-七星彩开奖综合| www.947254.com-3d中国彩吧蓝仙子| www.tk9.com-甘肃省快三遗漏| www.67685.cc-093彩票下载| www.026888.com-彩票跑路-| www.127212.com-彩虹玫瑰种子| www.227445.com-机械表一天快三秒| www.337595.com-青海省福彩投诉| www.762997.com-彩美41人-| www.835281.com-彩票藏机图大全| www.031858.com-双色球开机号牛彩网| www.122994.com-福彩公益金标志| www.147387.com-彩票投注员兼职| www.xm2.com-中国彩吧更懂彩民心| www.wa49.com-2013彩票开奖| www.7852.cn-足彩14转9算法| www.025474.com-坑人的重庆时时彩| www.110265.com-七星彩49组包码| www.679365.com-彩经彩票网好不好| www.204125.com-神彩争霸网址是多少| www.602038.com-计划彩票助赢群| www.693166.com-彩票研究规律的人| www.389777.com-塘厦彩票店转让| www.1002.vip-甘肃快三在线看| www.814643.com-安徽快三投注站| www.644595.com-彩九苹果下载安装| www.750705.com-第一盛兴彩票| www.839011.com-快三独胆-| www.909902.com-彩票网用户注册| www.965618.com-福彩3d多少钱一注| www.nc4.com-江苏快三中奖玩法| www.vv99.com-彩票导师先带你赢| www.86oe.com-go彩刷流水可靠吗| www.0287.xyz-彩票有追杀吗| www.xj06.cc-好彩3奖金是多少| www.26pw.com-体彩店加盟费| www.21qk.com-彩票合同性质| www.2114.xyz-江苏十一体彩选五| www.6gp.cc-国外彩票算法| www.2372.cc-伊川七彩龙都靠谱么| www.820756.com-彩钢瓦单价-| www.885317.com-彩票收藏及图片| www.957074.com-晶彩派-| www.999201.com-竞彩足球推荐彩客网| www.kt2.com-彩票开奖查询| www.717721.com-彩票开奖杳询| www.981487.com-易彩网主页-| www.024225.com-磁县彩票店转让| www.975725.com-伊川的彩礼要多少| www.34422.cc-上海福利彩票站| www.53676.cc-中国竞彩网点查询| www.273061.com-崔永元彩票-| www.383283.com-北镇彩票中大奖了吗| www.010295.com-体彩第19032期| www.71lq.com-鼓励彩民中奖的句子| www.33867.com-彩吧排列三试机号| www.77384.com-免费下载头彩| www.194128.com-那个快三平台送彩金| www.nx55.com-河北福彩快三预测| www.56152.cc-华彩控股前景| www.404638.com-彩铅画需要的工具| www.539527.com-彩票和值的计算方法| www.741578.com-福彩88下载-| www.703996.com-竞彩序列号怎么兑奖| www.519666.com-五福彩票有几个网站| www.573708.com-时时彩后三计划技巧|