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.982909.com-新盈彩快三破解器| www.rv23.com-戒彩吧-| www.4798.cc-58购彩网-| www.vw2.com-内蒙古福彩怎么兑奖| www.9098.cn-彩民之家网址| www.014560.com-大乐购时时彩| www.5940.com-500彩票账号注册| www.027975.com-宏达彩票是真的吗| www.688855.com-105彩-| www.778678.com-宝马彩票投注方法| www.384555.com-彩票的社会性质| www.611788.com-快乐双彩开奖公告| www.720800.com-彩票搞笑图片大全| www.808575.com-华东福彩15选5| www.cai8977.com7星彩预测-| www.041220.com-秒速高频彩长龙提醒| www.176417.com-彩票计划员是托吗| www.968290.com-网上时时彩怎么举报| www.42lf.com-体育彩票开奖视频道| www.671739.com-双色球走势彩宝网| www.773717.com-大发快三透视作弊器| www.861407.com-幸运彩怎样下载| www.947125.com-高频彩是骗局吗| 福彩www.15355a.com| www.157856.com-80彩票陷阱-| www.415004.com-彩盈线下娱乐| www.551337.com-lb快乐彩技巧稳赚| www.808083.com-优选彩店怎么下载| www.952007.com-6617彩票址导航| www.au36.com-福彩20选8-| www.014728.com-彩票史牛人-| www.3066.xyz-河北快3走势图快彩| www.53591.cc-身边有人中过彩票吗| www.864752.com-147彩票平台| www.973267.com-彩虹岛主线任务大全| www.46ih.com-易旺彩票网怎么样| www.cp729.com-全国彩票开奖号码| www.668483.com-博彩客服工作难吗| www.51383.com-彩虹糖不能吃| www.016903.com-福彩3d计算器组选| www.093785.com-高频彩票改时间| www.188514.com-爱彩乐官网-| www.719559.com-河北快三查询| www.121269.com-霸气彩票群名| www.511993.com-梦见朋友刮彩票中奖| www.665431.com-彩票出号定位方法| www.809508.com-彩店宝软件下载官网| www.930614.com-七i乐彩开奖号码| www.nf65.com-网络彩票追回钱款| www.91yq.com-彩票7码刷流水不亏| www.63208.com-打开足彩310报纸| www.77336.cc-福彩3d网冠彩彩报| www.657714.com-旧版彩经网彩票走势| www.890087.com-8亿彩是真的假的| www.10.org-体彩226断组| www.7144.cm-七彩国际影城君康店| www.902826.com-彩票交流请加群| www.288515.com-时时彩彩票高手论坛| www.382812.com-新浪足球胜负彩预测| www.589600.com-北京7星彩开奖号码| www.666195.com-青岛福彩老年公寓| www.1jz.cc-周一晚上福彩| www.69ry.com-关于买彩票的故事| www.0833.xyz-快三黑彩技巧| www.54843.com-天际彩票官网| www.007187.com-新快三和值如何下注| www.023519.com-福星彩开奖结果| www.148036.com-久久彩票提现快吗| www.79446.com-彩友会-| www.58255.com-人人中彩票旧版下载| www.091163.com-彩票开奖时间调整| www.226870.com-大众彩票是正规网吗| www.132576.com-彩票哪个app靠谱| www.581357.com-12生肖是什么彩票| www.668510.com-免费彩票统计软件| www.765652.com-e球彩怎么算中奖号| www.862225.com-体彩中奖号码七位数| www.950067.com-尼彩手机价钱| 500彩票网www.61655l.com| www.930858.com-破解彩票平台软件| www.858459.com-中国湖北彩票网| www.750177.com-公牛彩票app下载| www.892133.com-k彩福民彩地| www.954542.com-北京五亿彩票大奖| 福彩www.86267m.com| www.682651.com-福彩3d神算子| www.761131.com-好彩1好彩2玩法| www.836379.com-至尊彩江苏快3首页| www.895537.com-排三走势图乐彩网| www.957465.com-七星彩谁预测的最准| www.1rx.com-福彩十二选五规则| www.89ry.com-篮球一定牛竞彩推介| www.1804.xyz-重庆快三玩法介绍| www.531251.com-9彩下载-| www.er02.com-加拿大3分彩开奖| www.622066.com-福彩3d二码四码| www.686816.cc-全国彩票最大奖| www.779111.cc-众乐彩下载-| www.890604.com-彩票全网最高倍| www.982234.com-人人快三网址| www.bt22.cc-乐彩网大发快三下载| www.tg59.com-数字彩票研究方法| www.34xb.com-彩票开票查询| www.703.tv-上海福彩手机客户端| www.48xt.com-九万彩票充值没到账| www.23672.cc-彩票熊猫专属| www.78574.com-大赢家竞彩实体店| www.335336.com-广西快三是合法的吗| www.846536.com-福彩3d账号注册| www.130213.com-七星彩规律图片最新| www.3op.com-53彩票购彩网址| www.2431.vip-快三一码技巧| www.292222.com-体育彩票三位数| www.17129.cc-下载福彩开奖大全| www.178840.com-中国福彩app| www.95291.com-外围篮彩上哪买| www.047926.com-淘彩票彩种-| www.855850.com-七乐彩复式计算表| www.974775.com-山东彩民中双色球| www.cai8822.com吉林体彩十一选五| www.8107.com-大奖赛车彩票| www.721919.com-破解彩票手册| www.833626.com-双彩论坛手机版下载| www.631960.com-收米竞彩官网| www.796734.com-体彩任九19039| www.879189.com-幸运彩票平台黑钱吗| www.956353.com-七星彩19005期| www.bq59.com-彩票平台高赔所| www.wr95.com-好彩官方版苹果下载| www.7478.pw-体育彩票终端机销售| www.05533.com-深圳快乐彩奖金| www.767116.com-关注一下彩票开奖| www.443228.com-网易彩票是真的么| www.535723.com-快三用什么软件| www.32nf.com-中体彩彩票网| www.297624.com-快三如何稳赢| www.496949.com-c58彩-| www.30tk.com-足球竞彩亚盘入门| www.398233.com-淘彩票账号怎么注册| www.555405.com-湖北快三盘口| www.655968.com-tcg彩票官网| www.758110.com-彩38网站怎么样| www.876540.com-大彩网3d走势图| www.995640.com-竞彩足球5串一神单| www.34ou.com-怎么查福彩中奖号码| www.612.cn-圣地彩开奖-| www.598571.com-今天福利彩票开奖吗| www.673016.com-数据源一彩吧助手| www.770173.com-福彩2d中奖多少钱| www.841640.com-七乐彩守号精选一注| www.917189.com-重庆实时彩-| www.975434.com-七星彩算法必中6红| www.cp066.com-福彩3d过滤器| www.776130.com-北京快乐十分时时彩| www.860554.com-福利彩票奖金二等奖| www.947286.com-首尔彩票-| www.999763.com-快三路数-| www.zl6.com-上海福彩快3| www.yw04.com-云南省体彩中心位置| www.358975.com-下载体彩开奖结果| www.715213.com-大发快三稳定导师| www.804966.com-篮彩算不算加时| www.860632.com-冀彩宝投注-| www.912195.com-天天爱彩票无法提现|