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.8582.loan-排列三试机号家彩网| www.110386.com-帝皇彩票app官网| www.206541.com-网彩app下载| www.040812.com-快三推算下期| www.077077.cc-彩色复印价格| www.552209.com-爱彩乐怎么购买| www.652398.com-体彩什么时间开奖| www.756129.com-旺彩软件不能用了| www.845407.com-体育彩票成立日期| www.931157.com-快三怎么玩能赢| www.986463.com-周五竞彩足球彩客网| www.vs8.cc-发达彩票-| www.rk89.com-七乐彩中奖对照图表| www.57815.cc-福彩乐透安卓| www.11150.com-竞彩结果-| www.94072.com-福彩宣传语-| www.5664.top-快乐双彩走势图表| www.34868.com-体彩三十六选七| www.142617.com-财神彩票正规吗| www.230396.com-3d字谜凤彩网| www.206965.com-易彩网下载-| www.096178.com-体彩公益金-| www.183173.com-快三客app-| www.46674.com-时时彩胆码免费计划| www.006163.com-网上彩票平台有哪些| www.133425.com-天然彩色宝石| www.211336.com-浙江快三查询结果| www.283631.com-网络彩票平台哪个好| www.04xc.com-快三表演-| www.1752.wang-鸿彩网赞助-| www.6447.cn-33彩票计划网| www.00903.com-3d专家预测众彩网| www.952649.com-网上买福彩-| QQ彩票www.89894n.com| www.862217.com-安徽体彩票中奖| www.027178.com-1寸彩色相片图片| www.909218.com-福彩三b家彩网| 爱彩www.235672.com| www.508669.com-体彩天-| www.769400.com-江苏彩票快三好彩| www.130334.com-体彩大乐透奖金计算| www.926621.com-五福团购彩票骗局| www.cai5822.com长春快三中奖查询| www.889337.com-老凤凰旗舰版彩票| www.73eo.com-懂彩帝比分-| www.4815.biz-山西省体彩兑奖中心| www.367.live-福利彩票开奖事件| www.4715.cn-香港十分彩走势图| www.816.cm-彩虹群体-| www.691659.com-足彩快报app| www.qk88.cc-立彩屠龙软件下载| www.496612.com-彩83彩票网址| www.523312.com-如彩纺织工艺品| www.681344.com-77彩票赌会害| www.518972.com-重生中彩票小说| www.031991.com-彩票号码输入查询| www.23413.com-四季彩可靠吗| www.788393.com-上海快三开奖时间| www.886035.com-彩虹图片真实照片| www.76uq.com-福彩3d彩票图大全| www.076963.com-app彩票注册秒送| www.377749.com-22彩票app骗子| www.575701.com-约彩彩票停售| www.716781.com-彩铅手绘一棵樱花树| www.661345.com-福彩3d选号漏洞| www.829630.com-a25彩票-| www.973207.com-彩虹正版app| www.nk33.com-彩票下载送18元| www.814092.com-快三和值计算法| www.60036.cc-微彩站是不是真的| www.254832.com-时时彩app送彩金| www.vs05.com-中福彩票开奖网| www.26531.cc-体育彩票500万| www.20uz.com-自制选号彩票app| 中彩网www.2408d.com| www.507052.com-分分彩延迟开奖| www.744487.com-7彩网官网-| www.890956.com-至尊争霸app彩票| www.tt4.com-湖水快三中奖号码| www.567339.com-南京市福彩中心| www.678252.com-重庆彩开奖号码查询| www.185668.com-中国福彩的宗旨| www.296243.com-吉林快三计划书| www.22841.com-王者彩票主页| www.550877.com-福利彩票预测技巧| www.lt4.com-彩神快三全能版| www.085976.com-足彩中奖规则和奖金| www.73667.cc-湖北快三十大技巧| www.79500.cc-有玩彩票的群吗| www.2581.xyz-乐购彩票lgcp| www.0981.xyz-安全的彩票台子| 500万彩票www.500pt.com| www.05176.com-500彩票网下载| www.637839.com-鑫彩网彩票app| www.21331.cc-澳洲28是彩票吗| www.767851.com-河北快三和值号码推| www.193668.com-快三走势图江苏快三| www.064102.com-十分彩平台怎么赚钱| www.312825.com-福彩中奖号是| www.510514.com-彩虹的约定歌词寓意| www.1qk.com-江苏快三输了几万| www.76tt.com-彩迷网福彩3d| www.022634.com-甘肃体彩11选择5| www.221438.com-北京90年代彩票奖| www.819556.com-刘海柱中彩票全集| www.968401.com-时时彩暂停开奖| www.kt07.com-五分快三网赚| www.20156.com-彩票摇一摇-| www.de88.com-秒速飞艇ttc彩票| www.799957.com-郑州快三-| www.178538.com-广东福彩公众号投注| www.ro14.com-赢盈彩网-| www.9115.biz-中国福利彩票售价| www.6750.in-七乐彩预测推荐| www.743221.com-皇家彩世界彩| www.876675.com-幸运彩票网提现被黑| www.623.biz-所有彩票网站| www.28953.cc-福利彩票3d全网搜| www.169025.com-河南福彩快三| www.385499.com-喜来登彩票下载安装| www.101666.com-彩狮计划app下载| www.9378.me-福彩3d彩圣谜语| www.82398.cc-广东省体育彩票中心| www.cp6799.com-快三豹子后出号规律| www.7337.in-彩虹六号真实事件| www.89795.com-宁波公司年会彩票| www.092661.com-68彩票安卓客户端| www.975524.com-湖南省福彩中心域名| www.188767.com-福彩双色球预测| www.261444.com-火箭彩app下载| www.1401.com-亲子游戏彩虹伞视频| www.57io.com-cclcc金彩网| www.5295.cn-彩票采集修复教程| www.983814.com-离我最近的彩票店| www.08744.com-彩神通苹果手机版| www.191938.com-福彩三d走势图连线| www.11269.cc-网易足彩-| www.218058.com-共赢彩票网-| www.290336.com-内蒙福利彩票官网| www.279050.com-3d福彩开机号| www.886685.com-福彩双色球杀号瘦身| www.956107.com-500彩下载-| 39彩票www.39cp.cc| www.52229.cc-时时彩开奖彩经网| www.926522.com-256彩票app-| 福彩www.2109t.com| www.lo69.com-彩票选号优化方法| www.311632.com-摇发彩快三-| www.412314.com-竞彩足球比分计算| www.pq1.com-韩国快三开奖走势图| www.843306.com-国家快开彩票新规| www.922719.com-嘉兴福利彩票店转让| www.975305.com-休闲快三套路| www.cp405.com-大发快三有几个平台| www.296897.com-乐购彩票怎么样| www.989847.com-彩票888com-| www.ln94.com-彩票软件大全旺彩| www.385586.com-天空彩站禁三肖| www.468929.com-酷彩吧打不开了| www.cai750.com-快三大小规律破解图| www.338010.com-今晚福彩开什么号| www.447175.com-微信怎么卖彩票| www.526310.com-私彩代理要赔钱吗| www.603662.com-梦见彩票站-|