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.080011.cc-彩票税收标准| www.590191.com-全红彩票-| www.gl03.com-众彩彩票下载网站| www.185688.com-pc福彩是骗局| www.512823.com-乐彩彩票是合法的吗| www.140636.com-518彩票官网| www.166082.com-初学快三-| www.383731.com-河北体彩排列五| www.009884.com-华彩谢茂全-| www.464357.com-体彩在哪里看中奖| www.01911.com-旺旺彩票腾讯| www.hs73.com-大乐透机选新浪彩票| www.39976.cc-今日中彩有托吗| www.cp952.cc-福利彩票快乐彩任六| www.1237.cc-快三75期开奖号码| www.12589.cc-体育彩票app| www.9379.cn-7k彩票下载-| www.845643.com-订婚彩礼钱能退吗| www.985540.com-破解时时彩作弊软件| www.b14.cn-萄京彩票网址| www.69fr.com-华彩免费下载app| www.52658.com-好彩投28彩票| www.295713.com-网易彩票提现失败| www.381611.com-今天福利彩e票中奖| www.514234.com-那些彩种是官方的| www.36792.com-南京快三走势图| www.0089.cc-带有彩字的好听网名| www.658291.com-卖世界杯彩票的软件| www.789204.cc-澳洲彩票开奖结果| www.439615.com-西安未央区福彩转让| www.745667.com-8861彩票-| www.11770.cc-广东彩王准确资料| www.87622.com-v98彩票一级代理| www.407694.com-怎么上网买七星彩| www.625454.com-七乐彩十专家杀号| www.317222.com-彩九官方网站| www.407342.com-浙讧体彩20选5| www.402615.com-七星彩杀号360| www.402078.com-鑫彩娱乐是骗人的吗| www.087953.com-彩运无限是黑平台吗| www.299046.com-福彩快三在哪下载| www.286575.com-陕西快乐十分百宝彩| www.371585.com-彩铅风景画视频教程| www.464447.com-上官燕七星彩期预测| www.872798.com-遵义体彩中心在哪里| www.187433.com-7星彩玩法介绍| www.679591.com-人人中彩中过大奖吗| www.730978.com-易彩注册邀请码| www.830703.com-app最新彩票| www.942357.com-体彩群-| www.yg19.com-大发快三看和值| www.267344.com-北京快三走势图形态| www.731041.com-竞彩足球盈亏指数| www.04ao.com-快三全骰是什么意思| www.74vd.com-多彩娱乐下载| www.81346.com-官方平台重庆时寸彩| www.101917.com-红彩会正规吗| www.227333.com-七天彩下载app| www.704005.com-快三杀龙-| www.822124.com-七星彩18143期| www.925451.com-体彩排双胆预测| www.989084.com-彩八彩票官方| www.f73.com-七k彩票网-| www.731430.com-江苏快三是赌博| www.839015.com-竞彩分析软件好用吗| www.912404.com-七乐彩杀码论坛| www.974438.com-好彩票手机版下载| www.cp303.com-下载吉林快三走势图| www.331811.com-快三012路技巧| www.599652.com-买彩票会影响运气吗| www.696044.com-体彩足球竞彩计算| www.8212.cc-奔腾彩票是什么| www.40288.com-湖北省福利彩票兑奖| www.038867.com-赢彩网计划平台| www.24138.com-乐彩论坛乐彩网| www.926926.com-256彩票下载| www.978618.com-天天中彩票查询3d| www.hw4.com-彩票什么叫屠龙| www.qe20.com-7彩网官方下载| www.661125.com-专业彩吧走势图| www.190502.com-香港人人彩票| www.631682.com-怎样控制时时彩心态| www.850075.com-美国一分彩走势图| 500彩票www.50024n.com| www.dt38.com-幸运彩票是不是骗局| www.yw81.com-大发快三怎么买豹子| www.011405.com-福利彩开奖号| www.245883.com-易彩网的邀请码在哪| www.71qc.com-恒大时时彩-| www.0000.wang-8位数字彩票| www.187913.com-北京快三走图一定牛| www.329181.com-彩票送38元开户金| www.cp3928.com-百宝彩票河南快三| www.cm05.com-湖北快三未出号统计| www.01yh.com-生命的彩虹阅读理解| www.149646.com-彩票51中彩怎么样| www.292302.com-uu快三谁开的| www.385861.com-中彩票的段子| www.dv7.com-华夏幸运快三| www.440199.com-133彩票app-| www.347329.com-600万彩票网注册| www.479886.com-七星彩分几等奖| www.582666.cc-怎么中不了彩票| www.688661.com-广东彩票手机客户端| www.805066.com-彩票投注网站源码| www.878325.com-福彩3d九宫五行图| www.055676.com-全发彩票彩种| www.82588.com-足彩19036期| www.602635.com-福利三分彩人工计划| www.680779.com-全天快三-| www.755555.cc-旺旺彩app-| www.822872.com-体彩7星彩12号的| www.908116.com-贵州七星彩领奖地点| www.972324.com-福彩3d一定牛下载| www.dd48.com-世界彩票十大巨奖| www.yw98.com-中彩在线是什么| www.67bl.com-幸运分分彩免费计划| www.74459.com-七乐彩6等奖多少钱| www.022419.com-牛蛙彩开奖现场| www.961349.com-竞彩猫好彩频道官网| www.cp5759.com-江苏快三预测| www.6161.com-亚太彩票协会| www.687083.com-湖南体彩支票| www.764422.com-专家预测4场进球彩| www.824900.com-时彩害人-| www.890312.com-胜负彩360预测| www.953642.com-官方网彩票香港| www.995941.com-足彩19046期| www.ab63.com-江苏体彩快三查询| www.221048.com-彩票官方网站| www.367162.com-彩铅星空狼画法| www.519605.com-今晚体彩排列五预测| www.608779.com-派彩金额-| www.689051.com-天天彩票助手官网| www.062097.com-河南省幸运彩| www.773382.com-棋牌游戏送88彩金| www.566179.com-体彩在哪里买| www.229005.com-三分快三计划专业版| www.308981.com-福彩3d绝对布衣4| www.902326.com-哪里可以买3d黑彩| www.723457.com-如何骗你买福彩| www.791755.com-淘彩娱乐平台怎么样| www.988174.com-038彩票平台苹果| www.915382.com-淘宝不能买彩票了吗| www.970277.com-彩票老师骗局| 500彩票www.50080t.com| www.306219.com-彩六官网下载ios| www.470546.com-博猫彩票最近不对| www.u56.cn-体彩3d藏机图| www.44261.com-3彩服饰-| www.vf29.com-河北福彩快3豹子5| www.05wd.com-水彩漆十大品牌| www.975417.com-彩票摇一摇可靠吗| www.cp6337.com-一分钟快三官网| www.797180.com-凤凰vi彩种-| 网易彩票www.097wy.com| 彩乐汇www.83565.com| www.49333.cc-温州彩票店开到几点| www.l27.net-棋牌彩票投注网站| www.102022.com-射龙门彩票计算法| www.101172.com-查询彩票是否中奖| www.275058.com-168彩票苹果版| www.392353.com-网易彩票大乐透杀号| www.1221.blue-49彩网-|