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.43oh.com-精彩是什么梗| www.141344.com-凤彩字谜-| www.28899.cc-快三安微开奖| www.32261.cc-足彩加-| www.08hl.com-七星彩txt微盘| www.85wr.com-福彩3d詹天佑| www.2122.pw-津南区彩票中心| www.179442.com-福彩计划群骗局| www.030626.com-珍爱网拉人玩彩票| www.334777.com-体彩快3奖金| www.460886.com-今日彩票吉数| www.553134.com-网彩计划员-| www.654803.com-网上东方彩票靠谱吗| www.741147.cc-澳门有哪些合法彩票| www.858451.com-彩世界苹果版下载| www.952754.com-体彩超级大乐透玩法| www.cai4388.com内蒙古快三下载| www.395291.com-彩虹岛手游官网盛大| www.41po.com-七星乐彩票倍投规律| www.2431.cn-吉林快三四码黑| www.04kl.com-竞彩足球全部买冷门| www.55fd.com-在彩票站工作怎么样| www.953743.com-老彩民看凯利指数| www.981421.com-竞彩足球九场开奖| www.579968.com-七星彩txt下载| www.57535.com-七彩网址-| 福彩网www.055g.cc| www.647764.com-淘彩娱乐是骗局吗| www.8310.net-江西彩票品种| www.236466.com-乐乐彩是什么| www.330536.com-长春彩溢会所流程| 凤凰彩票www.55228d.com| www.126066.com-手机购彩客户端下载| www.ro60.com-深圳福彩22选一| www.51py.com-彩虹伞亲子游戏小班| www.550005.cc-彩客集团股价下跌| www.559609.com-彩购平台app下载| www.880681.com-黑彩平台制作| www.48955.cc-中国福彩网打不开| www.727033.com-乐彩软件-| www.853850.com-云南时时开彩| www.937452.com-7星彩复式计算器| www.984650.com-彩八彩票是骗局| www.ba11.com-网彩骗局-| www.r10.space-体育彩票怎么代理| www.46sm.com-河南福彩手机版下载| www.627.in-手机淘宝在哪买彩票| www.367263.com-彩票返奖率什么意思| www.503377.com-福彩网时时乐| www.586021.com-易博国际时时彩| www.122453.com-彩神网首页-| www.955220.com-500彩票破解| www.587654.com-竞彩范德彪-| www.59988.com-下载微彩站-| www.092099.com-248彩票全部软件| www.q81.com-吉林95诚信快三| www.465111.com-106彩票-| www.999875.com-体彩排列三兑奖规则| www.kh09.com-福彩中奖查询| www.03kz.com-足彩宝典app| www.8702.biz-匕星彩开奖-| www.sg81.com-最大的十大彩票平台| www.89lf.com-电竞博彩合法| www.123335.com-1088彩票网-| www.5525.wang-一道彩虹却不曾说过| www.383072.com-鸿运福彩是真的吗| www.56006.cc-怎么买一分快三| www.984971.com-彩选8-| www.r22.xyz-重庆时时彩网购群| www.07077.com-福利彩票什么软件买| www.725637.com-福星彩开奖网站开| www.470000.com-境外足彩推荐网站| www.635790.com-宝乐彩票app下载| www.718652.com-彩虹颜色顺序| www.807174.com-全人类彩票最大奖| www.875181.com-大发快三稳赚方法| www.937732.com-90彩票邀请码| www.993113.com-彩票团队赚-| www.br76.com-全天一分快三计划网| www.019453.com-福彩销售员的发言稿| www.250677.com-306官方彩票下载| www.83va.com-美作彩刴简介| www.118419.com-微彩票agg-| www.029804.com-彩之家首页-| www.lq61.com-关于买彩票的新闻| www.485445.com-利用彩票平台挣钱| www.7319.com-彩虹5号电池容量| www.841923.com-福利彩票30-| www.936048.com-时时彩聚宝盆app| 福利彩票www.78700c.com| www.vy98.com-香港有什么彩票种类| www.198654.com-彩神ⅱ下载-| www.287228.com-彩票刷对冲佣金| www.333332.cc-80彩票是什么平台| www.438231.com-富彩彩票正规吗| www.330217.com-七天网的彩票靠谱吗| www.062496.com-彩10-| www.45589.com-福彩3d大小振辐| www.92048.com-顺丰彩票合法吗| www.041649.com-体彩竞彩胜平负结果| www.112637.com-七乐彩查询-| www.173758.com-彩票哪个平台最靠谱| www.531921.com-彩票33带上岸| www.865835.com-彩票娱乐台子| www.oa82.com-多赢吉林快三app| www.65211.cc-彩娃彩票官网网址| www.154786.com-足彩任九奖金最高| www.216819.com-江苏快三彩票| www.rf72.com-168娱乐彩票平台| www.07sg.com-手绘彩铅-| www.73kx.com-福利彩快乐十分走势| www.ow65.com-双彩论坛3d字谜解| www.43bp.com-彩钢岩棉板图片| www.0142.cn-体彩助手手机软件| www.7340.in-彩虹6号萌-| www.7590.net-新浪爱彩如何提现| www.03qa.com-体彩排列三和尾走势| www.73cy.com-福彩双色球篮球最大| www.144676.com-唯彩看球app| www.903673.com-中国体彩票开奖号| www.975942.com-安阳市区彩礼| www.cai1766.com福彩快三彩票| www.45074.com-有人带玩彩票靠谱吗| www.83914.com-农村天价彩礼谁来管| www.770058.com-七彩视界下载| www.684096.com-彩票杀号软件| www.173920.com-哪个正规平台有快三| www.252608.com-中彩网靠不靠谱| www.97090.com-pc蛋蛋那个彩票| www.356614.com-赠送福利彩票| www.38464.com-风彩娱乐-| www.728294.com-体彩综合版走势图| www.169677.com-内蒙古快三下载安装| www.337652.cc-宝发彩票下载网址| www.578208.com-快三群名字大全| www.0917.space-时时彩追号稳赢技术| www.0015.net-彩票生肖技巧| www.935175.com-广东11选5大彩| www.ih35.com-福彩有官方app吗| www.52ij.com-福彩走式-| www.93578.cc-有人靠玩彩上岸吗| www.069094.com-7697优乐彩登陆| www.149118.com-505彩票下载官网| www.92740.com-立彩是不是合法彩站| www.060064.com-澳门彩金是真的吗| www.365047.com-菲律宾做博彩客服| www.22841.com-王者彩票主页| www.48817.com-有什么正规竞彩平台| www.003362.com-彩票大家玩-| www.119417.com-今日福彩中奖号码| www.598.date-网易彩票网双色结果| www.243638.com-手机买彩票怎么下载| www.921927.com-安阳彩礼一般多少钱| www.778555.com-体彩61开奖号码| www.7081.vip-分分彩历史开奖| www.26064.com-彩虹有什么象征意义| www.78502.com-双彩网pk10-| www.050338.com-网络黑彩案例| www.168700.com-玩时时彩教你三招| www.276191.com-众彩网福彩3d预测| www.961923.com-下载双彩网论坛官网| www.pd6.com-上饶彩票中奖人被杀| www.956247.com-网上彩票有赢钱的吗| www.is14.com-乐米彩票合法吗|