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.ji97.com-时时彩最准推算公式| www.nn04.com-竞彩夜猫-| www.35844.com-上海快三破解器| www.090090.cc-eg彩票平台导航| www.227245.com-快三网站手机版| www.500229.com-英国5分彩开奖时间| www.8205.cm-黄石彩票中大奖| www.hz13.com-福彩快三害人不浅| www.950.date-彩票中心没有双色球| www.24786.com-彩铅梦幻鹿-| www.76630.com-玩彩票大平台登录| www.037161.com-下载福利彩票app| www.p96.org-排五体彩排五开奖号| www.586621.com-棋牌注册送彩金38| www.819499.com-体育彩票利与弊| www.969639.com-精彩音乐-| www.gf84.com-最快的彩票开奖源| www.26mj.com-加盟体彩站需多少钱| www.7888.cc-今天的体彩开奖公告| www.74442.cc-手机彩票网站源码| www.128436.com-三分快三单双计划| www.946238.com-河南彩礼贵吗| www.208619.com-彩票砍龙是啥意思| www.446999.com-黑网站和重庆时时彩| www.131902.com-江苏彩礼排行| www.ub19.com-彩神网推荐火爆四肖| www.100238.com-百宝彩视官网注册| www.64787.com-竞彩单关叫停| www.913122.com-好彩客老版下载| www.753010.com-有多少种彩票| www.193615.com-马来西亚乐和彩开奖| www.391698.com-大乐透体彩算法| www.82644.com-直播足彩-| www.737698.com-今天3d彩报图库| www.029048.com-地方彩票开奖时间表| www.837608.com-福彩3开机号试机号| www.871595.com-足彩缩水软件有哪些| www.686377.com-500博彩下载| www.951264.com-01彩票aqq官方| www.508491.com-时时彩相关软件| www.469199.com-同心国际彩票| www.852981.com-运动彩券-| www.995605.com-北京单场和竞彩| www.445967.com-推荐彩票预测软件| www.712629.com-玩彩票平台有哪些| www.848792.com-时时彩如何破解连挂| www.570112.com-七彩云南第壹城三期| www.344559.com-雪缘园竞彩足球比分| www.112699.com-神彩争霸邀请码| www.631957.com-福彩今天预测号码| www.175208.com-江苏快三开奖详情| www.374302.com-体育彩票十一夺金| www.805007.com-大发快三预测网| www.31251.cc-易彩云彩票-| www.661897.com-竞彩大奖获得者| www.io8.com-江苏体彩e球彩开奖| www.1642.vip-重庆时时彩5星直选| www.77937.cc-福彩3d中两个号| www.206367.com-易彩票合法吗| www.363552.com-中彩网河北快三开奖| www.635000.com-建盏的七彩能擦掉吗| www.924434.com-6亿彩票网-| www.37vv.com-全国各地彩礼| www.35do.com-福利彩票双色球新闻| www.jw77.cc-老版彩库-| www.787585.com-福建体彩今日开奖号| www.069876.com-神彩软件下载| www.966077.com-体彩打票机键盘图片| www.od20.com-新福彩3d-| www.81zj.com-郑州体彩网点申请| www.961431.com-湖北福彩3d日报| www.ja56.com-足彩胜负彩-| www.6ig.com-每日首充彩票平台| www.0835.org-足彩购彩app| www.33078.com-236彩票-| www.024792.com-体育彩票大乐透论坛| www.172923.com-贵州福彩双色球| www.523335.com-19049期足彩| www.63yb.com-姚记彩票网不能提现| www.806236.com-彩票361理财| www.xp54.com-七星彩历史开奖表| www.82ah.com-数字三彩神通| www.08074.com-彩票丢了-| www.091702.com-最新58彩票手机版| www.239113.com-刷彩是做什么| www.362467.com-快乐彩前三直走势图| www.586082.com-168彩票苹果系统| www.3052.win-七星彩2284-| www.82784.com-北京快三两码遗漏| www.193485.com-吉体彩11选5| www.332311.com-卖一张彩票提成多少| www.051162.com-查彩票双色球| www.110241.com-快乐彩开奖号码表| www.286982.com-28彩票官方网站| www.417373.com-彩虹直播-| www.632450.com-打出的彩票能注销| www.771098.com-安徽快三买彩计划| www.936352.com-彩票自助销售机| www.004912.com-彩票开奖软件下载| www.144928.com-自贡市福利彩票点| www.271239.com-八亿彩软件下载| www.853104.com-彩票广告图片搞笑| www.831105.com-广州彩妆加工厂| www.378.me-维彩视频双色球宝典| www.496881.com-福彩体彩过年休几天| www.576519.com-竞彩计算器网页版| www.650630.com-彩虹伞托班教案| www.726259.com-河北彩票最大奖| www.798684.com-盛世彩票手机| www.876508.com-福彩3d独胆一个号| www.974931.com-彩票查询有没有中奖| www.8jt.com-天天中彩票的天才猫| www.63xc.com-彩票网能提现不| www.1288.site-时时彩试玩平台| www.6610.com-福彩快三网上赚钱| www.71fv.com-欢乐彩票提现| www.772179.com-时时彩组六全包技巧| www.039923.com-福彩3d合买网| www.134301.com-好彩香烟多少一包| www.229630.com-093彩票手机版| www.308507.com-马来三分彩-| www.381580.com-正规体彩店买私彩| www.498578.com-买彩票正确心态| www.580955.com-彩票会是真的假的| www.678915.com-麒麟彩票软件下载| www.784358.com-在手机上买七星彩| www.863516.com-qq购彩票-| www.938956.com-网易竞彩单场专家| www.999674.com-湖南福彩动物总动| www.fk30.com-贵州体彩网首页| www.i38.org-南方双彩最专业走势| www.63yw.com-福彩3d通选和包选| www.1303.me-体育博彩app下载| www.7789.pro-买竞彩心得-| www.26465.com-河北快彩快三电子图| www.67360.cc-福利彩票有几等奖| www.ua63.com-彩票拉人交流术语| www.027907.com-足彩任九胆拖投注表| www.110493.com-66彩票的网址| www.182856.com-亚洲彩票可以赚钱吗| www.266566.cc-天下彩944cc| www.346630.com-谁有易彩票邀请码| www.427285.com-足彩进球开奖结果| www.791490.com-时时彩大平台| www.960421.com-彩票亿元大奖| www.17mn.com-彩益健康浴场电话| www.956721.com-胜负彩新浪完全数据| www.867946.com-海南七星彩千军万马| www.863046.com-晚上有开福利彩票吗| www.920976.com-彩神ivapp-| www.975046.com-彩票图表频道| www.nd73.com-大赢家彩票导航| www.n11.wang-福彩陕西快乐十分| www.62jg.com-广东福彩网站主之家| www.784.biz-九龙彩霸图片| www.3717.cc-体彩排列五字谜| www.08286.com-肉蒙快三走势图| www.54371.com-时时彩趋势k线手机| www.485808.com-彩93怎么样靠谱吗| www.580211.com-彩票老司机靠谱吗| www.664389.com-易购彩软件下载| www.744618.com-华彩生活app官网| www.993866.cc-足彩混合投注怎么玩| www.31.link-省级福彩中心改革|