QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 图片代码 > jQuery响应式单排图片滚动代码

原创商用 jQuery响应式单排图片滚动代码

jQuery基于Swiper制作响应式的图片列表左右滚动,悬停图片遮罩文字切换效果。适用于项目解决方案产品列表响应式布局代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/style.css"/>

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="service-title">
  <h2>解决方案</h2>
  <p>面向各种领域:教育、装修、安防、旅游、企业、集团公司等网站建设、营销网建设解决方案、品牌网站设计等建站服务。</p>
</div>
<div class="solution-box">
  <div class="solution-cut">
	<button class="fa fa-back"></button>
	<button class="fa fa-more"></button>
	<div class="solution-swiper">
	  <ul class="solution-wrapper">

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>企业网站建设解决方案</h3>
			<p>好推建站全面提升品牌、提高技术、完善服务。推动中国互联网共同成长。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/1.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>营销型网站解决方案</h3>
			<p>好推建站-互联网思维,营销技巧,SEO推广方式帮助企业获得客户流。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/2.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>HTML5响应式网站解决方案</h3>
			<p>好推建站,针对移动互联网时代,好推提供企业HTML5响应式网站建设解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/3.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-all"></i>
			<hr>
			<h3>集团网站建设解决方案</h3>
			<p>好推建站-专注于集团网站建设、设计开发、集团群站整体解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/4.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-security"></i>
			<hr>
			<h3>品牌网站定制解决方案</h3>
			<p>好推建站-网站定制服务主要针对品牌需求,专业定制属于自己的品牌网站。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/5.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-huanhuobz"></i>
			<hr>
			<h3>外贸网站建设解决方案</h3>
			<p>好推建站-帮助企业开拓海外市场业务,外贸网站建设解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/6.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-aniukefu2"></i>
			<hr>
			<h3>装修行业网站建设解决方案</h3>
			<p>好推建站为装修企业提供全方位数据分析,地区用户需求分析,网站建设整体解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/7.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-set1"></i>
			<hr>
			<h3>机械行业网站建设解决方案</h3>
			<p>好推建站针对机械行业,通过对客户需求,用户数据分析,做出网站建设整体解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/8.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>LED行业网站建设解决方案</h3>
			<p>好推建站-为LED行业提供网站建设解决方案,充分体现LED产品的品牌优势,重点塑造品牌个性化形象。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/9.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-naozhong"></i>
			<hr>
			<h3>IT软件系统网站建设整体解决方案</h3>
			<p>好推建站为IT软件系统企业,提供网站建设整体的解决方案和应对措施。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/10.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-suo"></i>
			<hr>
			<h3>行业门户网站建设解决方案</h3>
			<p>好推建站,专业为企业、政府、不同领域提供高品质的大型门户网站建设解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/11.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>生态农业网站建设解决方案</h3>
			<p>好推建站助力-生态农业,新农业发展,新农业健康食品发展网站建设解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/12.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>环保节能网站建设解决方案</h3>
			<p>好推建站专业的设计师根据节能环保公司的需求,采用最新表现技术全面设计,充分体现公司的企业形象</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/13.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>房地产网站建设解决方案</h3>
			<p>好推建站提供房地产网站建设方案,采用先进的HTML5技术,完整的布局给企业带来的经济效益立竿见影。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/14.jpg'>
		</li>

		<li class="solution-slide">
		  <span>
			<i class="fa fa-wxbgongju"></i>
			<hr>
			<h3>教育培训网站建设解决方案</h3>
			<p>在互联网高速发展的今天,好推建站为教育培训企业提供网站建设整体解决方案。</p>
			<a href="#">查看详情</a>
		  </span>
		  <img src='statics/images/15.jpg'>
		</li>

	  </ul>
	</div>
  </div>
</div>

<script type="text/javascript">
	$(document).ready(function(e) {
		new Swiper('.solution-swiper',{
			wrapperClass: 'solution-wrapper',
			slideClass: 'solution-slide',
			slidesPerView: 'auto',
			loop: true,
			observer:true,
			observeParents: true,
			centeredSlides: true,
			prevButton: '.solution-cut .fa-back',
			nextButton: '.solution-cut .fa-more'
		});
	});			
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
强国彩 www.499218.com-万豪彩票破解方法| www.524911.com-绑定app送彩金| www.662307.com-头头博彩是什么| 500万彩票www.35155e.com| www.234554.com-彩票站现状及前景| www.959818.com-金星vr3分彩官网| www.nb6.com-分分快三彩票平台| www.td20.com-快三的分解动作| www.11ky.cc-越南五分彩开奖结果| www.641.xyz-鑫乐博在线彩票| www.6389.vip-乐透乐新彩网| www.21363.cc-今天足球竞彩对阵表| www.0411.org-彩票预测合法吗| www.580009.com-七星彩走势图怎么看| www.690877.com-买福利彩票违法吗| www.17920.com-十大彩宝品牌| www.887535.cc-2044彩票网址| www.md95.com-21彩票app-| www.66sc.com-彩8下载苹果版| www.3254.cm-彩票停止销售时间| www.56611.cc-大赢彩票app下载| www.120486.com-燕赵福彩新闻公告| www.77959.com-体彩大乐透客服电话| www.560575.com-乐彩网破解器手机版| www.680777.com-掌优彩票是真的吗| www.790639.com-江苏老快三三同号| www.896729.com-分分彩稳定长期挂机| GO彩www.fo64.com| www.uc59.com-全民彩票下载安装| www.70dw.com-彩票贪-| 彩多多www.78949j.com| www.26567.com-七星彩奖金表| www.085331.com-玩时时彩心得体会| www.184177.com-河北快三套同选| www.3ir.com-山东泰安体彩中奖| www.2044.org-k8彩票黑钱-| www.822662.com-五百万竞彩网站| www.938593.com-新快三必中-| www.2468.la-彩票彩客网手机老版| www.189874.com-江苏快三预测推荐| 非凡彩票www.77210f.com| www.js45.cc-快三多少分钟一期| www.m87.com-彩票注册下载送礼金| www.55ei.com-好运彩票官网| www.613569.com-体育彩票11任选| www.39uk.com-百福彩票平台靠谱| www.80883.com-江苏手游彩下载专区| www.35112.com-彩票排列五-| www.102232.com-富彩彩票app| www.yp69.com-日本的彩票玩法| www.640.xyz-v博彩票平台| www.585630.com-国外彩票代购| www.6459.vip-豪彩官网注册账号| www.85055.cc-体彩北京十一选五| www.178302.com-内蒙快三中奖规则| www.344253.com-体彩排列三折线| www.458070.com-百博七星彩-| www.3324.cc-彩色的梦教学设计| www.59zx.com-福利彩票官方版| www.811515.com-聚丰彩票50707| www.3017.biz-逸彩美寓-| www.074518.com-金彩网下载-| www.234988.com-福利彩票正版下载| www.16437.com-万彩网注册-| www.013313.com-周三开奖彩票| www.100490.com-百乐彩手机版| www.190500.com-安徽快三开奖预测| www.256425.com-网易手游彩票| www.328339.cc-中彩吧彩票平台| www.154150.com-福彩红球分三区| www.338096.com-彩票微信怎么合买| www.781482.com-彩名堂官方下载| www.898841.com-福彩门户网址书签| 大赢家彩票www.50048.com| www.gw22.com-黑客爆中国彩票造假| www.01xp.com-彩虹毕飞宇阅读理解| www.145214.com-699时时彩下载| www.888943.com-彩站宝是否合法| www.984145.com-彩票三期倍投计划表| www.wg36.com-吉林省体彩兑奖中心| www.5jm.com-福彩专家杀码定胆| www.83iw.com-彩票摇号器app| www.3209.vip-幸运彩票怎么领彩金| www.455876.com-男主彩票中奖小说| www.iq02.com-首页新彩票走势网| www.966275.com-双数开彩是什么数字| 淘彩票www.tcp969.com| www.248011.com-快三全自动开盘软件| www.425021.com-体彩93多少钱| www.554997.com-亿彩彩票官网首页| www.89ob.com-沈阳彩票站转让| www.6658.in-彩678app中心| www.252863.com-中华彩票可靠吗| www.95285.com-一路红竞彩店app| www.v10.in-搞笑彩票中奖信息| www.80yh.com-599彩票骗局| www.2023.site-棋牌彩票二合一| www.7777.loan-青岛福彩一等奖| www.646006.com-足彩技巧心得| www.812535.com-新彩网总汇大全| www.912564.com-时时彩计划网页人工| www.826798.com-彩票造假事件刘亮| www.962060.com-彩票彩民版是真的吗| www.cp485.com-兰州福彩快三走势图| www.58055.cc-官方彩网-| www.008336.cc-彩票挂机软件| 大赢家彩票网www.83033u.com| www.535926.com-博金冠彩票是真的吗| www.585603.com-购买海外彩票| www.157700.com-足彩只买平局能赚6| www.383792.com-乐彩会员资料| www.060555.cc-贩卖私彩构成什么| www.11168.com-河南彩票快开| www.111011.com-御彩轩软件计划图表| www.854074.com-安徽快三奖励| www.939496.com-买快三的官方平台| www.742059.com-香港新星彩手机网址| www.990.in-六位数字的彩票| www.5696.cc-日本30秒彩票玩法| www.054713.com-搭建时时彩网| www.228911.com-36选7开奖好彩1| www.607752.com-天津市福彩领奖地址| www.682592.com-大圣彩票家升级版| www.760070.com-官方时时彩走势图| www.820854.com-七星彩新浪走势图| www.895707.com-广东快三是官方的吗| www.962585.com-精准彩票计划网站| 500彩票www.50026i.com| www.051309.com-幸福彩票是什么| www.605010.com-盈盈彩官网彩票| www.328907.com-大乐透牛彩网彩摘网| www.383215.com-彩票19029期| www.6965.vip-融彩网怎么样| www.21213.com-中国足球体育竞彩网| www.387297.com-趣发彩票app| www.318955.com-江西彩票作假事件| www.773414.com-送彩金500的网站| www.949892.com-8炫彩福利彩票| www.58185.com-彩助手缩水工具| www.916722.com-彩票入款优惠2| www.974747.com-福彩购买-| www.cai018.com-快三怎么玩稳赚| www.7ep.com-足球彩票怎么看买啊| www.1643.org-领航时时彩缩水软件| www.592591.com-全通彩票-| www.o35.biz-彩宝贝彩票开奖查询| www.902.com-彩票gg网页版| www.7123.cc-建盏的七彩能擦掉吗| www.010053.com-福彩3d遗漏-| www.860577.com-⑥和彩-| www.923983.com-买彩票是看运气吗| www.974297.com-澳彩官方网站app| 500彩票www.377507.com| www.824779.com-68彩票黑平台| www.891526.com-彩票术语怎么解释| www.956087.com-玩彩票的心态| 双龙娱乐www.slyl4.com| www.776169.com-福利彩票店吃票| www.39890.cc-祥云纳彩荣耀播报| www.0ol.com-成语添光溢彩| www.643411.com-彩票兑奖查询平台| www.07426.com-彩客网双色球预测| www.ny07.com-福彩选号神器| www.919856.com-怎么伪造彩票|