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天

知道了
亚洲28 www.98lw.com-黑彩有人赚钱走吗| www.133474.com-彩色沥青设备多少钱| www.086411.com-彩客彩票老版本| www.996043.com-北单开奖彩客| www.dh79.com-江苏省福利彩票中心| www.vh22.com-上海福彩网官网网页| www.23tc.com-韩国彩票快乐彩官网| www.180850.com-彩13app-| www.p57.xyz-快三现在一天多少期| www.75qa.com-金龙和玺彩画图片| www.1803.net-彩票幸运投注| www.8698.cn-全民爱彩票下载安装| www.56149.com-9彩平台-| www.010810.com-易网彩票怎么不更新| www.445299.com-体彩你中奖是真的吗| www.pj39.com-江苏体彩中心| www.14lp.com-彩虹六号刘醒资料| www.660609.com-亚博科技彩票| www.879754.com-体彩481奖金规则| www.951287.com-竞彩足球购买平台| 梦想彩票www.33112k.com| www.771.space-时时彩开奖早知道| www.971208.com-体育彩票中奖结果| www.027.pink-代打彩票收分红骗局| www.886993.com-体育彩票是否真实| www.959650.com-百盈快三直播| www.cai6655.com长春快三开奖视频| www.mr39.com-浙江快乐时时彩| www.10fs.com-体育彩票五位数开奖| www.93iq.com-163a彩票app| www.88qx.com-和信彩票是不是黑网| www.rt09.com-彩客网1分快3规律| www.003801.com-福彩快乐10分概率| www.224569.com-江苏快三中奖宝典| www.030765.com-大大彩票可靠吗| www.133160.com-怎样开福利彩票店| www.220911.com-时时彩助手软件下载| www.770496.com-买福彩双色球的软件| www.884074.com-买大小单双彩票下载| www.982402.com-分分时时彩开奖查询| www.gv08.com-五分彩是骗人的吗| www.03nd.com-彩票86-| www.35ov.com-盛世彩票官网| www.663458.com-3d乐彩关注码| www.83876.com-文家市镇彩票投注站| www.129594.com-七星彩下期开什么码| www.dm0.cc-五分快三走势口诀| www.687589.com-內蒙古福彩app| www.835305.com-日税顺滑特醇好彩| www.963743.com-手机买彩票的软件| www.ns95.com-v8彩票陷阱-| www.83zr.com-c48彩票网登录| www.7380.cn-懂球帝彩票在哪买| www.57759.cc-福利彩票开店| www.064641.com-长沙快三彩票| www.01791.com-彩票时间调整| www.45oa.com-彩票店开到几点| www.458870.com-cba彩票软件下载| www.938498.com-快频彩百度百科| www.bm71.com-老版网易彩票下载| www.266502.com-快三是什么赌博| www.517145.com-乐艺997彩票| www.693513.com-买彩票网站哪个靠谱| www.833181.com-76c彩票线路检测| www.nq45.com-免费彩票选号器| www.879733.com-如何进入彩票数据库| www.977832.com-吉林快三历史开奖| www.644864.com-青岛福利彩票网| www.871674.com-苏州彩票领奖中心| www.918994.com-河南快三和值跨度表| www.al13.com-七星彩和值走势| www.2mq.com-世界杯体彩哪个好| www.213902.com-约彩彩票app下载| www.700068.cc-福彩兑奖规则表| www.821124.com-牛彩网牛彩图库| www.969831.com-彩票5d开奖号| www.yh17.cc-淘宝福彩哪里买| www.21917.cc-完美彩票计划| www.067662.com-彩票网搭建-| www.367125.com-查询体彩的软件下载| www.19qq.cc-体育彩票大彩网| www.020861.com-网络销售彩票| www.545437.com-福利彩票30选七| www.705121.com-网易彩票兑奖| www.886796.com-福彩快开彩赛马| www.882615.com-基诺彩票怎么中| www.tq8.com-易彩_娱乐福地| www.674894.com-彩票的监管单位| www.sy87.cc-海南七星彩包码技巧| www.61hb.com-体彩3d中奖号今天| www.006489.com-冀彩宝站主平台注册| www.047817.com-武汉福彩站点转让| 网易彩票www.554363.com| www.831147.com-下截福彩双色球软件| www.971973.com-创彩是干嘛的| www.9997.tv-8k彩票一分钟大发| www.025127.com-彩票怎么投注最稳| www.826384.com-鸿运彩票体现不了| www.972497.com-查体彩开奖号码| www.71699.cc-福彩3d今天开机号| www.909374.com-天津快三开奖走势图| www.jm09.com-大发时时彩qq群| www.404411.com-农村彩神双色球文章| www.60lv.com-网易红彩教程| www.6014.cc-山东省体彩中心地图| www.492215.com-体彩大乐透中奖情况| www.377084.com-微信qq彩票-| www.715625.com-福彩3d今天校验码| www.778175.com-高频彩是什么东西| www.846322.com-崔永元说彩票是假的| www.901231.com-河北燕赵福彩排列五| www.964193.com-体彩试机号及金码| 500彩票www.374277.com| www.643907.com-天天分分彩官方网站| www.099364.com-体彩360-| www.477777.com-赣州彩票-| www.781781.com-分分彩万能挂机方案| www.981362.com-彩票中奖查询系统| www.d53.club-一1福体彩开奖号码| www.14258.com-彩票2元网怎样| www.035968.com-快三怎么买稳赚| www.161790.com-金碧汇彩app| www.028817.com-容华彩票官方网| www.539492.com-体彩机过户-| www.659572.com-足球彩票一足彩投注| www.98ek.com-许昌盛彩滴滴官网| www.611590.com-八方彩票网官方端口| www.7631.net-98彩票网站-| www.389787.com-东莞大朗彩票站转让| www.571751.com-吉林快三逐鹿计划| www.649286.com-和彩国际官网| www.949.me-体彩七位要不要顺序| www.788836.com-山东结婚彩礼| www.951070.com-足彩竞彩500| www.id29.com-彩票快三能赚钱吗| www.210258.com-分分快三预测为网| www.977339.com-烟台彩礼2018| www.fp0.com-时时彩破解器| www.712626.com-网络购彩恢复了吗| www.sq.cc-河南福利彩票快3| www.105045.com-网易足彩单场推荐| www.183033.com-皇都彩票是假的| www.715837.com-压彩票-| www.067873.com-手机智能彩票摇号器| www.816499.com-吉林快三系统故障| www.729468.com-新浪爱彩走势图大全| www.553504.com-要怎么戒掉赌足彩| www.1014.net-彩乃奈奈番号| www.685040.com-天吉网福彩体彩论坛| www.919856.com-怎么伪造彩票| www.835609.com-彩运8计划软件| www.947569.com-彩票兑奖不接受采访| www.aa22.cc-湖北武汉快三| www.uo49.com-福彩3d条件专区| www.94hc.com-七星彩怎么看走势图| www.9331.online江苏快三昨天开奖| www.81hm.com-福彩快乐十分新规则| www.539563.com-可以买釉中彩餐具吗| www.660600.com-高频彩联盟pk10| www.727509.com-杏彩娱乐app| www.139435.com-彩票下载就送彩金| www.286536.com-玩彩老头独胆| www.225755.com-彩计划-| www.283479.com-七星彩算法-|