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.082263.com-网赌时时彩害死我了| www.274161.com-重庆时时彩开奖宝典| www.400282.com-体彩官网哪里买好点| www.565822.com-中龙彩票-| www.34ek.com-在天七星彩开什么码| www.1504.pw-彩虹屁夸女生| www.27fx.com-585彩票-| www.132458.com-河南彩礼20万| www.232867.com-彩票号码查询| www.339581.com-博彩对澳门的影响| www.454566.com-酷彩3d相册-| www.599576.com-5a彩票网下载| www.364659.com-体育彩票竞猜世界杯| www.505774.com-玩黑彩能赚钱吗| www.603193.com-彩讯pc28开奖| www.691086.com-福彩排列七开奖日期| www.822222.com-5oo彩-| www.929720.com-彩票管理条例| 中彩网www.71233j.com| www.ov00.com-福彩快三实时走势图| www.540744.com-1比分彩票开奖| www.673990.com-英国彩票网360| www.850106.com-足彩任选9-| www.946508.com-福建体彩论坛网| www.ij42.com-下载福利彩票| www.23nw.com-韩国金山快三查询| www.309608.com-福建体彩公式出码| www.509125.com-彩16正规吗-| www.027959.com-彩友多买彩票可靠吗| www.6476.cn-网上怎么开彩票网站| www.849992.com-今天福彩3b试机号| www.72095.com-多彩彩票合法吗| 大赢家彩票网www.54400s.com| www.nf67.com-038彩票上瘾了| www.155433.com-下载玩彩票-| www.249500.com-彩c02下载-| www.331143.com-噢客网足彩比分直播| www.428532.com-牛蛙彩票开奖现场料| www.547254.com-投注彩票刷流水| www.636696.com-pc彩票下载-| www.759426.com-大中华彩票群| www.855939.com-时时彩小妙招| www.e99.tv-七乐彩在线机选投注| www.970168.com-台湾福彩开奖记录| www.ga4.com-彩票七星彩玩法介绍| www.201995.com-收贵州快三-| www.283309.com-彩票五码的倍投方法| www.357270.com-那些彩票中奖的人| www.452561.com-华南地区火爆七星彩| www.551365.cc-风彩依旧什么意思| www.54iu.com-福彩三d大湖谜语| www.692172.com-明发彩票大发快3| www.769624.com-好彩下载156版| www.851111.com-竞彩初几开售| www.tb07.com-彩票彩种有哪些| www.020944.com-众彩网首页网| www.095552.com-爱彩乐是不是假的| www.ht25.com-江苏体育彩票七位数| www.00mi.com-七星彩头尾合数表| www.98dj.cc-福彩新版公益诗| www.720759.com-内蒙古快三开正文| www.042007.com-欧洲彩票-| www.306197.com-立彩助手-| www.0615.vip-7070彩票网址| www.09628.com-福彩专业玩彩胡先生| www.942318.com-体育彩票佣金怎么算| www.8650.in-七星彩历史遗漏数据| www.74500.cc-怎样玩乐彩-| www.047471.com-淘彩彩票-| www.83um.com-大师彩票怎么能中奖| www.3317.net-彩票局势-| www.84894.com-七星彩开机号今天| www.002402.com-彩易3d藏机图| www.087852.com-网上网站赌博彩票| www.176975.com-三分快三投注技巧| www.69rv.com-彩票中大奖故事| www.274100.com-快三新规则-| www.688079.com-竞彩网计算器混合| www.77bw.com-彩88推荐-| www.576486.com-唐山福彩中心| www.884729.com-亿彩堂是正规的吗| www.65532.com-炫彩界面库教程| www.803687.com-微信好友拉玩彩票| www.907567.com-长春体彩客服| www.981912.com-七星彩开结果奖预测| www.ap94.com-贵州体彩网联系方式| www.525398.com-搜索58彩-| www.79978.com-千亿彩票5-| www.983620.com-西安彩票站投诉电话| www.ft2.cc-时时彩组三规律口诀| www.350298.com-福彩3d五行出号法| www.688490.com-彩票七天乐是骗局吗| www.782336.com-八万彩票-| www.856717.com-福彩一等奖概率| www.915685.com-沈阳彩票站利润咋样| www.972754.com-彩库宝典查询资料| www.v74.website沧州彩票-| www.sl23.com-河内时时彩官网开奖| www.604307.com-60彩票是黑网站| www.694433.com-头奖彩票软件合法吗| www.771604.com-腾龙时时彩工具| www.834477.com-赢彩彩票下载安装| www.893001.com-河北快三和值跨度表| www.952828.com-福利彩双色球| www.995077.com-惠彩网是什么东西| www.mw4.com-人人中彩票下载| www.70zv.com-时时彩精准杀码技巧| www.hi07.com-彩票软件大全下载| www.53561.cc-网投福彩-| www.ms33.com-彩票种类介绍大全| www.58191.cc-利彩工具彩助手| www.7146.vip-七彩狐地址-| www.802938.com-长沙市福彩中心地址| www.216036.com-快三豹子规律| www.440805.com-长城彩票是什么意思| www.021634.com-信彩票安全吗| www.139.red-彩虹屁教程-| www.191596.com-彩经网-| www.464256.com-类似好彩爆-| www.x28.net-九洲彩票-| www.1558.cn-多彩贵州公司| www.375051.com-极速⑥和彩在线计划| www.669503.com-彩凤临门的意思| www.816019.com-3d黑圣手福彩| www.940052.com-南国彩票论坛4+1| 易旺彩票www.yw344.com| www.527940.cc-重庆时时彩遗漏分析| www.588536.com-刚刚七星彩开什么奖| www.037745.com-七乐彩在线选号工具| www.wi41.com-大发时时彩计划网址| www.571499.com-看彩票开奖结果查询| www.692339.com-网络博彩账号被冻结| www.813080.com-中国体育彩票图片| www.q42.net-广西福彩快三手机| www.jx15.com-17年七星彩-| www.v59.cn-牛彩网一彩搜网| www.219022.com-易盈彩票-| www.63741.com-全国彩票试机号今天| www.9275.cc-深圳招聘彩票分析师| www.55233.com-体彩大乐透直播现场| www.97986.cc-时时彩精准预测| www.788621.com-美国昨天彩票出奖号| www.94zt.com-彩票平台彩金套利| www.9446.wang-体彩排列三图迷大金| www.52681.cc-为什么玩时时彩必输| www.397666.cc-福彩欢乐十分钟| www.313571.com-彩票资讯网首页| www.9863.vip-点金彩画-| www.87ma.com-淘宝上买彩票| www.505444.com-盛彩官网-| www.628596.com-什么彩票不作弊| www.4029.net-sb博彩-| www.09676.com-丹东联盟彩吧3| www.941186.com-手机阿里彩票怎么买| www.cp0908.com-一分快三走势图| www.325592.com-福彩3d狂想字谜| www.4819.top-下载万众彩-| www.3245.vip-时时彩胆码运用技巧| www.s75.online-福彩今晚3d得出啥| www.111640.com-福彩帮投是什么意思| www.813475.com-福彩金条回收价格| www.882155.com-f彩网骗局-| www.964336.com-卖体彩赚钱吗| 大赢家彩票平台www.068672.com|