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天

知道了
彩01彩票 www.731545.com-彩色手提纸箱设备| www.137874.com-买大发快三的技巧| www.228226.com-内蒙福彩下载| www.300005.com-篮球彩票分析预测| www.368046.com-七星彩书版番外| www.457948.com-恒彩网677-| www.558552.com-精彩中国说总决赛| www.664374.com-兴博彩票qq群| www.020105.com-特彩吧天下彩费资料| www.122780.com-酷彩吧中奖怎么领| www.203050.com-湖北彩票开奖公告| www.9582.wang-凤凰彩票幸运快三| www.250664.com-彩票306网页版| www.466379.com-e赢彩苹果下载| www.671392.com-彩票站转让费得多钱| www.99166.cc-时时彩投注单笔3万| www.aq55.cc-福建福彩网官方网站| www.604986.com-彩色苹果箱子批发| www.994923.com-香港好彩堂-| www.59bt.com-派彩甘肃快三走势图| www.34tl.com-京彩e账户登录| www.894.in-彩票33是什么意思| www.7184.vip-彩宝品牌-| www.467744.com-足彩预测准的在哪里| www.640711.com-环彩网官方下载| www.774379.com-七乐彩复式怎么玩| www.697.live-私彩代理要赔钱吗| www.7596.cn-山东在线买彩票| www.52886.com-福彩2等奖多少钱| www.680111.cc-两元彩票网站| www.805731.com-彩报第三版图| www.37865.cc-新版本彩票77| www.954627.com-国外彩票会提前| www.0470.onlineyg彩票-| www.603671.com-梦到开彩票店| www.161292.com-福彩印刷有限公司| www.241988.com-七星彩单式-| www.378004.com-高价彩礼害死人| www.hp07.com-胜负彩的中奖规则| www.065858.com-彩票漏洞改数据| www.244856.com-快三倍投计划| www.652239.com-福彩3d公告-| www.953684.com-pp彩票是不是正规| www.32on.com-七星彩不定位中奖| www.25930.com-备注是个彩虹| www.026719.com-日本彩票怎么玩| www.228829.com-江苏快三推荐号二同| www.387718.com-周公解梦七星彩查码| www.777701.cc-星彩无惨漫画桃屋猫| www.097198.com-福彩3d大花虎2| www.255437.com-五星时时彩做号技巧| www.380126.com-湖北福利快三预测| www.566876.com-即墨福彩中心电话| www.688862.com-广东体彩中心网| www.872050.com-彩票注册大乐透| www.988240.com-掌中彩一福利彩票| www.396568.com-58娱乐彩票-| www.578839.com-福彩店子图片| www.741827.com-竞彩2窜1技巧| www.876056.com-天下无敌彩报| www.730627.com-玩彩话彩-| www.23363.com-神彩争霸下载1| www.61986.cc-大奖五分快三计划| www.092319.com-我要体彩-| www.255695.com-快3购彩小贴士| www.970491.com-燕赵福彩排列期开奖| www.859275.com-浙江体彩大乐透| www.731322.com-完美彩票网站| www.335449.com-买彩票app官网| www.59ta.com-体彩竞猜限制| www.5376.cn-支付宝有卖彩票的吗| www.76687.com-福利彩票下载载| www.193286.com-甘肃福利彩票双色球| www.343346.com-体彩排三杀码定胆| www.637496.com-60彩票靠谱吗| www.ry2.com-爱彩乐彩票河北快三| www.328474.com-彩容网触屏版| www.099524.com-乐趣彩票是黑平台么| www.33735.com-福利彩票新手入门| www.224044.com-uu快三怎么玩稳赚| www.450605.com-数字3彩票开奖号码| www.9295.cn-乐彩vip平台| www.920693.com-福利彩票中奖图片| 凤凰彩票www.88266z.com| www.19ib.com-玩时时彩赚钱心得| www.9372.online国家彩票原主任| www.425167.com-足彩18059任九| www.623828.com-48彩票app-| www.7864.com-足彩讨论区-| www.926684.com-开彩门-| www.993625.com-第一彩中国足球彩票| www.fj04.com-上海快三全天计划| www.lt33.com-时时彩全天计划蜂巢| www.yh47.cc-网上买彩票该如何购| www.861873.com-下载qq彩票-| www.351621.com-华阳有彩票店转让吗| www.026316.com-高兴彩票黑平台| www.150207.com-中彩手彩票大全| 双彩网www.651012.com| www.29pg.com-延吉有福彩中心吗| www.5194.biz-福彩赵立群-| www.88694.com-网上买足彩可靠吗| www.1382.top-水彩画风景-| www.265887.com-宁夏福彩中心官网| www.970268.com-彩票带单什么意思| www.65rq.com-豪彩彩票3d-| www.055514.com-雅彩彩票是不是正规| www.025770.com-头奖彩票网-| www.561962.com-快三计划软件免费版| www.9212.biz-河南经济报福彩专刊| www.289587.com-九龙彩票是合法的| www.326962.com-全国彩票试机号| www.89256.com-彩票注册送29| www.373759.com-好彩薄荷铁盒| www.vh66.com-牛彩网3d胆断组| 亿万彩票www.095005.com| www.96uj.com-彩票宝不给提现| www.669050.com-北京彩钢压瓦机| www.20678.com-网络彩票实属诈骗| www.289366.com-七乐彩开奖走势图表| www.sa42.com-吉林快三春节停几天| www.980315.com-手机够彩票下载| www.mw4.com-人人中彩票下载| www.hw88.com-河北快三单双号玩法| www.33810.com-玖玖彩票app下载| www.077977.com-银河乐彩客户端下载| www.418226.com-恐龙彩铅画-| www.773890.com-中彩可靠吗-| www.40084.com-七星彩号码走事图| www.141585.com-福彩字谜解太湖字谜| www.ep50.com-福彩3d胆码预测| www.nt39.com-toto彩票-| www.539307.com-彩票是什么原理| www.56780.cc-火箭彩票安卓版| www.378709.com-体育彩票加盟流程| www.4911.in-彩668-| www.61466.cc-众彩手机下载| www.79vb.com-篮球竞彩网预测推荐| www.401234.com-竞彩十连黑-| www.007461.com-辽宁福彩12选5| www.c63.top-历史上福彩开奖号| www.186517.com-上海快3爱彩乐| www.79uf.com-快三大小预测技巧| www.630967.com-体彩彩运宝可信吗| www.895376.com-爱快三彩票网| www.866675.com-福利彩票直播| www.3604.xyz-足球彩票价钱多少钱| www.872193.com-贵阳彩票一等奖| www.010408.com-大奖网彩票电脑版| www.215818.com-福彩3d规律破解| www.89335.cc-和乐彩票软件| www.325822.com-星彩论坛3d-| www.777480.cc-青海省快三开奖果| www.215650.com-青海快三今天推荐号| www.382952.com-3月16日体彩| www.ry58.com-31彩票app-| www.8375.top-旺角彩皇免费资料| www.20zl.com-山西彩票11选5| www.553144.com-张家口体彩地址中心| www.026381.com-今晚私彩开什么| www.26823.com-贵卅快三彩开奖公告| www.90698.com-乐赢彩票下载安装| 牛逼彩票www.343133.com| www.22300.cc-下彩彩票注册送58|