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.617592.com-重庆体育彩票招聘| www.730939.com-和彩云是什么收费吗| www.800138.com-体彩任五开奖结果| www.871507.com-新快三时间开奖| www.974853.com-南京体彩-| www.cai2266.com福彩3d开奖结果| www.8688.site-8亿彩票交流群群号| www.302779.com-308彩票手机版| www.809089.com-11145彩民-| www.943163.com-彩票中奖抛妻弃女| www.xc7.cc-湖北福彩快三统计表| www.9ku.com-体育彩票是怎么买| www.3898.win-彩票和制图-| www.12yd.com-老套子彩票快3| www.671491.com-重庆时时采彩开奖表| www.770229.com-七彩捞腌菜游戏下载| www.857353.com-gc彩票投注网网址| www.926260.com-福利彩票一定牛下载| www.997499.com-职业时时彩玩家绝招| www.gc06.com-上海快三开一定牛| www.zz21.com-竞彩店申请-| www.27yn.com-全彩漫画母系怀孕| www.126.org-体育彩票几天开奖| www.8222.cc-中国体育彩官网| www.439559.com-玩京彩犯法吗| www.568007.com-辽宁省福彩中心电话| www.653197.com-七星彩开奖综合版| www.730676.com-褔彩开奖-| www.803085.com-彩宝彩票软件| www.879641.com-时彩在线追号计划| www.948686.com-体育彩票购彩小程序| www.999565.com-大发快三怎么买数字| www.bi47.com-网易彩票app| www.260290.com-福彩3d兑奖地点| www.345682.com-彩漫福利本子库| www.428675.com-最近的福彩销售点| www.547710.com-安徽快三怎么选号| www.930195.com-竞彩篮球让球玩法| www.981748.com-彩客网首网-| www.cp8336.com-哪种彩票一分钟一开| www.166275.com-快三走势图分析预测| www.0016.com-属龙购买什么彩票| www.255635.com-甘肃快三豹子号遗漏| www.01993.com-老高侃彩-| www.96576.com-河南订婚四彩礼| www.8810.wang-福建体彩宫方网站| www.72871.com-彩神爷算胆-| www.036266.com-彩票提醒-| www.609646.com-甘肃白银福彩中心| www.720899.com-88爱彩下载-| www.813608.com-福州彩票店转让信息| www.909093.cc-澳门生肖彩游戏软件| www.970395.com-彩票天天乐app| 奔驰彩票www.825799.com| www.252856.com-时时彩开奖视频| www.015918.com-鸿彩直播app| www.39579.cc-大乐透彩票解码器| www.90925.com-好彩开奖1-| www.061131.com-新浪彩网竞技风暴| www.129749.com-看彩票双色球开奖| www.127542.com-彩虹六号新手教学| www.865522.com-河北福彩5开奖结果| www.995858.com-80彩票陷阱-| www.rs72.com-快三秒小黄瓜| www.43yj.com-新浪中国竞彩对阵表| www.4167.cc-彩虹6号多少钱的好| www.091514.com-703彩票网苹果版| www.967454.com-12彩票app下载| 天下彩www.458689.com| www.jj48.com-河南省快三玩法说明| www.c98.top-百宝彩山东群英会| www.34ij.com-首充送彩金-| www.387.cm-安徽体彩排列5| www.8922.com-体彩竞彩兑奖有效期| www.39584.com-快乐彩票余额图片| www.96477.com-意大利有什么彩票| www.066004.com-彩虹代刷网授权查询| www.167607.com-极速快3彩票| www.293773.com-688大发快三彩票| www.35286.cc-章鱼彩票群号| www.79573.com-福彩15选5第一位| www.039101.com-福彩5分快三咋玩| www.345414.com-彩神通金码今天的| www.410518.com-今日头条老郑足彩| www.011248.com-北京时彩开奖号码| www.130674.com-时时彩宝典官方下载| www.914314.com-优信彩神-| www.974667.com-七星彩最新开奖消息| www.sm9.com-彩票规则双色球| www.uf76.com-十大彩票-| www.11rw.com-好彩0567玩法| www.76ch.com-新彩票机-| www.0818.cn-普通彩票店胜负彩| www.928097.com-英国有哪些高频彩种| www.983448.com-1彩登陆-| www.oz40.com-银川彩票大奖| www.3ai.cc-热购彩网址-| www.61tg.com-彩31官方-| www.0566.bid-3d彩票陈华-| www.5337.cc-彩铅画风景简单图片| www.09760.cc-专业玩彩胡-| www.592387.com-彩99官网安卓下载| www.692755.com-大连体彩机转让信息| www.787966.com-彩票开奖历史20| www.865318.com-福彩3d遗漏-| www.926201.com-瑞彩祥云彩票可靠吗| www.974256.com-环球彩票68806| www.am75.com-152彩票网-| www.pj77.cc-彩票怎么看规律| www.953720.com-金牛彩票出款难| www.cai5455.com廊坊快三-| www.37gh.com-盈丰团队彩票| www.2668.vip-彩壹万彩票封了| www.611180.com-微彩吧官方站| www.vg97.com-80彩票能提现吗| www.039608.com-京东快彩无法注册| www.033252.com-易彩票app的网址| www.096300.com-彩宝贝杀号定胆红球| www.591291.com-竞彩输钱了千万| www.664444.cc-区县体彩中心业务员| www.729114.com-福彩3d网址-| www.790518.com-天吉彩票论坛吉| www.854426.com-61彩票开奖号码| www.901148.com-彩票数学知识| www.953701.com-足彩奖金计算器| www.991049.com-彩之网3d绕胆图| www.kr43.com-玩彩票下载-| www.k80.online-重庆时时彩个人平台| www.17pj.cc-点击彩app-| www.013608.com-七星彩和值尾走势| www.558525.com-网上买黑彩违法吗| www.14cg.com-竞彩优惠打折哪家好| www.427899.com-快三分分彩真的假的| www.522522.cc-全新腾讯5分彩| www.597591.com-乐购彩票官网网址是| www.672009.com-红色万彩吧下载| www.735809.com-彩虹玫瑰多少钱| www.801217.com-502彩票下载| www.872698.com-福彩幸运农场高手群| www.937515.com-cp710彩票真假| www.993817.com-体育彩票胜负彩规则| www.ho.com-足彩专家预测| www.723117.com-牛彩网采摘网| www.804252.com-彩票能从网上买吗| www.94hw.com-中i国彩吧-| www.76205.com-潘向东中彩票| www.652044.cc-福彩每周开奖日期表| www.712588.com-盛兴彩票app下载| www.777954.com-正版978彩票| www.835862.com-福利彩票代销证办理| www.888988.cc-如意彩票下载| www.952081.com-加拿大28彩票| www.990044.com-中彩网时时彩怎么样| www.cp3638.com-体彩481开奖结果| www.438107.com-彩民彩票客服电话| www.514896.com-小彩妆品牌加盟代理| www.72zp.com-香港福彩-| www.847.tv-二八彩票怎么看| www.7610.biz-体育彩票门脸牌子| www.053332.com-5福彩票下载| www.771435.com-体育彩票刮刮乐秘诀| www.848574.com-即开型彩票返奖率| www.905129.com-网络彩票是真是假| www.977793.com-内蒙古快三购彩|