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天

知道了
百盈PK10 www.53oo.com-云南彩票大奖新闻| www.63515.com-河南彩礼为何这么高| www.32785.com-汇彩控股南光集| www.99041.com-公益彩票三d开机号| www.092710.com-彩票软件注册送彩金| www.9276.xyz-乐彩网是干什么的| www.7456.pw-体彩顶呱刮-| www.116455.com-福彩3d规律是什么| www.051972.com-106时时彩下载| www.819348.com-投彩带赚是骗局吗| 彩神购彩www.csgc4.com| www.69330.com-竟彩官网-| www.101364.com-中彩拉app-| www.228933.com-湖北快三二同号遗| www.057123.com-彩票倍投方法多少钱| www.935219.com-彩乐网手机最快开奖| www.cp6599.com-内蒙快三昨天未出号| www.680369.com-淘彩票注册| www.779992.cc-福彩三d计算方法| www.870773.com-彩票投资指南pdf| www.951453.com-优信彩票19660| www.30wr.com-香港天空彩免费资料| www.2543.xyz-灯彩的种类-| www.9284.xyz-福乐彩被骗经历| www.659846.com-顺盈彩票靠谱吗| www.793174.com-玩彩算赌博吗| www.252123.com-旺彩大乐透预测| www.369174.com-手机高频彩-| www.23ve.com-韩国有足球彩票吗| www.366625.com-彩铅色彩搭配口诀表| www.476416.com-苹果app体育彩票| www.577277.com-福彩体彩速查表| www.779802.com-福彩三b走势| www.859320.com-彩票一号店-| www.937531.com-网站快三押单双大小| 吉利彩票www.66376p.com| www.274698.com-时时彩4星打法| www.226008.com-福彩快三害人| www.355471.com-三彩玉甘肃有吗| www.133800.com-雷好彩1预测| www.607912.com-足彩网亚洲杯| www.mr03.com-七乐彩的玩法说明| www.745634.com-棒棒彩票购彩大厅| www.509771.com-博乐博彩-| www.365754.cc-彩铅画花卉绘画教程| www.3652.biz-足球任九购彩| www.125208.com-福彩中奖概率最高| www.268021.com-688彩票黑钱| www.707952.com-千万彩票怎么领彩金| www.476199.com-福彩号码中奖号码| www.030805.com-106cm彩票-| www.5fu.cc-彩经网址-| www.39651.cc-天天中彩票游戏| www.82098.com-仑头福彩迷app| www.098857.com-优彩彩票骗局揭秘| www.349122.com-ibb娱乐彩票官网| www.091234.com-微微彩票官网| www.982683.com-共享彩票下载| www.8294.xyz-彩票幸运六点半| www.628418.com-新彩计划下载| www.sz1.com-香港168彩票网| www.29yq.com-全民彩票注册网| www.510.org-快开彩票群-| www.700086.cc-福彩任三中奖多少钱| www.153351.com-彩票都那几个数号出| www.688998.cc-上海体彩网官网下载| www.108153.com-彩票谜语3a-| www.76vo.com-福彩中加力实业| www.7532.loan-彩票店开不下去了| www.045288.com-博发彩票官方网站| www.716771.com-手绘彩铅动漫樱花树| www.818226.com-体彩竞彩图片| www.906635.com-彩票平台送彩金29| www.965851.com-发彩网彩票站怎么样| 鑫彩网www.xcw866.com| www.906884.com-高频彩技巧论坛| www.3778.in-大玩家彩票下载安装| www.495290.com-彩漂能洗彩色衣服吗| www.484898.com-福州11选五彩票| www.873691.com-彩83软件下载| www.358361.com-中国体育彩票资料| www.360068.com-大彩鲸网页版| www.8260.xyz-微彩排列三五奖表| www.954101.com-黑龙江福彩app| www.89731.com-胜负彩新浪爱彩| www.869862.com-彩票开奖现场视频| www.148682.com-皇都彩票怎么玩法| www.152409.com-吉祥彩票快三| www.6543.xyz-小站宝彩票安卓下载| www.18739.com-彩票黑平台查询| www.gc22.com-体彩快三的玩法介绍| www.v97.com-买彩票用语-| www.59sq.com-体彩为什么限售| www.954321.cc-体彩虚拟足球怎么玩| www.3613.me-连红彩票安卓版下载| www.122350.com-中乐彩zlc-| www.232132.com-重庆时时彩包胆| www.577591.com-福彩三d图谜第二版| www.681011.com-赌彩票能戒掉吗| www.787992.com-李小五足彩微博| www.892494.com-下载最多的彩票软件| www.4do.cc-刮刮扫码彩票机| www.430524.com-葡京彩票下载| www.288329.com-爱乐彩11选五辽宁| www.639625.com-只赚佣金的竞彩玩法| www.737852.com-欢乐彩票官网下载| www.897157.com-足球竞彩兑奖规则| www.974033.com-环球彩票幸运快三| www.am54.com-贵州福利彩票招聘| www.738299.com-时时彩的概率和趋势| www.813553.com-足球彩票奖金怎么算| www.882472.com-英国五分彩怎么玩| www.945997.com-美国一分彩开奖号码| www.984530.com-福彩3d小小鱼图迷| www.cp3223.com-新韩国快三开奖| www.iy13.com-温州体彩中心地址| www.589798.cc-台湾六星彩开奖结果| www.036211.com-五分彩预测软件| www.611699.com-微信彩虹岛水果攻略| www.616037.com-亚洲人肉彩漫图片| www.7498.pw-够力七星彩奖麦| www.653373.com-大彩票-| www.79vh.com-南京福彩中心在哪| www.180624.com-福彩快3交流群| www.555486.com-平台彩票可以买吗| www.gq69.com-好彩店彩票合法不| www.696123.com-广西快三今日推荐号| www.799111.com-体彩票超级大乐透| www.870464.com-福利彩票3d幸运码| www.965158.com-柬埔寨正规博彩公司| www.cai2016.com河北快三一定牛| www.np81.com-大发快三计划qq群| www.05gp.com-渐变花朵彩铅片| www.944.cc-七星彩2位数多少钱| www.5017.cm-适合手机彩膜的图片| www.23561.cc-网上买彩票几百人| www.82658.com-一彩票图谜总汇| www.61695.cc-福彩双色球是骗局吗| www.0nz.com-流文溢彩广播稿| www.691282.com-足彩彩比分-| www.192161.com-七星彩下期预测| 手机购彩www.c602.cc| www.0224.top-掌上彩票安卓版| www.934649.com-彩70官网-| www.981017.com-777彩-| www.am50.cc-彩票投注平台| www.xx11.cc-818彩票app-| www.58zz.com-双色球胆拖中奖彩民| www.32ni.com-万国彩票是正规的吗| www.1553.com-极速时时彩免费软件| www.8067.loan-水彩玫瑰花线稿| www.927398.com-江苏体彩彩民论坛| www.732010.com-江苏省彩票兑奖中心| www.494108.com-3d彩图1-| www.924939.com-丹麦快乐彩在线预测| www.983119.com-上海快三开结果| www.dp62.com-今日河北快三奖号| www.190986.com-内蒙快三新规定| www.9az.com-美国彩票兑奖有效期| www.90xq.com-小米的彩蛋-| www.841272.com-孕妇彩妆哪个牌子好| www.099463.com-北京快三区路线| www.735261.com-初玩彩票怎么玩| www.819099.com-彩票翻倍怎么计算|