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天

知道了
58福彩 www.79785.com-阜阳福彩自助终端| www.443232.com-福彩3d一周计划表| www.599877.com-体彩能打双色球吗| www.704710.com-福彩3d反集助手| www.811893.com-下载7k彩票网址| www.897769.com-高频彩开奖作弊不| www.976674.com-四川自贡彩礼价目表| www.qv44.com-分分时时彩哪个好| www.014104.com-703彩票app-| www.1488.tv-彩库宝典彩图资料| www.33727.cc-买哪个彩票好| www.98820.cc-大乐透彩票截止时间| www.206979.com-彩民网-| www.731035.com-河北快三电子走势图| www.24267.com-福彩3d÷规律| www.77440.com-体彩软件哪个软件好| www.103905.com-乐彩网安全吗| www.204599.com-多乐彩票骗局| www.th08.com-快三怎么跳好看| www.23qy.com-韩国快三介绍| www.633123.cc-竞彩篮球让分怎么玩| www.818614.com-彩票双色球过滤器| www.508281.com-体育彩票收藏册| www.292135.com-哪些高频彩是正规的| www.418686.com-彩绘龙盘-| www.wz22.com-七星彩今期的神算子| www.070611.com-彩友会彩票模板| www.802153.com-彩29彩票安卓下载| www.943611.com-连中彩票官网下载| www.397528.com-用户登录福彩易购| www.709051.com-七天彩票是真的假的| www.836854.com-易彩计划导航网| www.525.cn-7星彩怎么中奖| www.59698.cc-福彩天下无敌2| www.89228.cc-567彩票软件| www.132710.com-世界杯足彩盘口| www.262060.com-快三软件哪个是真的| www.974105.com-广东福彩双色球规则| www.954105.com-海南七星彩私彩玩法| 99彩www.996763.com| www.iw37.com-浙江彩票网-| www.11xe.com-黄鹤楼大彩抽法视频| www.230981.com-湖北福彩快3预测| www.512371.com-和善美彩铅画| www.bw28.com-盈佳彩票app| www.222626.com-大发快三是骗局吗| www.289635.com-代玩彩票是真的| www.16499.com-如何在竞彩中盈利| www.405384.com-山西太原彩礼| www.976552.com-山西忻州彩礼及陪嫁| www.cp6679.com-搜索湖北快三预测| www.pq74.com-排列三彩吧助手| www.281141.com-人人快三网正规吗| www.121924.com-胜负彩开奖任九奖金| www.0cb.com-中奖彩民的故事| www.924.mobi-彩票代售点利润| www.14393.com-体彩排三开机号| www.72815.com-今日快三中奖号| www.318342.com-福彩三地试机号千禧| www.974422.com-用手机在哪买彩票| www.uq2.cc-彩票预测神器| www.061653.com-彩客网怎么提现不了| www.693515.com-快三数字生成机制| www.780658.com-彩铅画教程动漫| www.872393.com-福彩助手app开发| www.960442.com-竞彩宝安卓-| 大赢家彩票www.578411.com| www.re52.com-体育彩票七位数查询| www.83iw.com-彩票摇号器app| www.297420.com-快三真的可以赢钱吗| www.397341.com-彩票中奖视频故事| www.375575.com-体育彩票任3多少钱| www.483817.com-足彩让球是什么意思| www.99947.cc-168彩票怎么样| www.41vs.com-体彩开奖排三贴吧| www.156282.com-重庆实时彩开奖记录| www.123675.com-福彩相年富-| www.913803.com-福彩双色球领奖视频| 冠赢彩票www.310787.com| www.sd59.com-彩票稳赢平台群| www.384748.com-澳发彩票app下载| www.23886.cc-什么彩票是五位数| www.603285.com-彩虹六号安装| www.46jv.com-港版绿好彩好抽吗| www.549058.com-今晚天彩票几点开奖| www.10jg.com-天佑风采彩票| www.534242.com-买彩票守号会中奖吗| www.59bw.com-中国体育彩票奖池| www.923.live-福利彩8官网| www.8778.vip-足彩预测软件哪个好| www.557884.com-今日彩票邀请码| www.678328.com-3d彩民群群号| www.2764.biz-彩票壁纸-| www.821888.com-福彩群英会任三遗漏| www.914266.com-天天乐彩票-| www.974268.com-七乐彩4加1多少钱| www.46hg.com-竞彩足球总进球经验| www.752625.com-彩票挂机软件开发| www.854467.com-快三开挂辅助器| www.928528.com-福彩3d出号规律| www.980988.com-七彩图片-| www.cai6344.com今天江苏快三开奖| www.576641.com-彩报3d怪字-| www.650880.com-天津时彩开奖直播| www.737908.com-彩金捕鱼是什么意思| www.28193.cc-美国高频彩票| www.914678.com-58彩票官方-| www.ds31.com-如何反彩票托的套路| www.603201.com-彩讯pc28刮刮乐| www.698193.com-凤凰快三下载| www.837706.com-网上设赌时时彩案例| www.93kp.com-彩票宝和大发一样吗| www.210721.com-福建快三预测推荐表| www.974178.com-购彩票软件哪个好用| www.710517.com-竞彩操盘手招聘| www.789958.com-福彩谜图总汇牛材网| www.852118.com-华人官方彩票登录网| www.904095.com-彩票购彩平台| www.958006.com-彩99平台下载| www.999878.com-中国福利彩票燕赵| www.cb62.com-天天彩票的网址| www.8455.xyz-体彩红孩双胆今天| www.219484.com-高频彩犯法吗| www.306427.com-688彩票软件| www.802672.com-彩界的精英3d双胆| www.160597.com-500时时彩彩票网| www.296854.com-惠民彩票-| www.423289.com-2017彩票图片| www.616810.com-彩票中奖去哪换| www.711389.com-经济频道天天福彩| www.803525.com-乐彩彩票充值骗局| www.892946.com-全民彩官网-| www.988464.com-期期中彩票软件| www.fg99.cc-快三彩票网最顶尖的| www.0rh.com-七乐彩真的假的| www.7573.wang-东方彩票手机软件| www.027901.com-一号彩票输惨了| www.038769.com-彩票投资-| www.279688.com-齐鲁彩票中心| www.51sl.cc-十字彩怎么充值| www.234199.com-江苏快三免费计划表| www.398392.com-河南省体育彩票竞彩| www.210737.com-吉林长春快三开奖| www.40ol.com-彩吧三毛3d图库| www.gg24.com-电波表快三秒| www.538453.com-大众彩票网骗局揭秘| www.696210.com-鲤鱼立体彩铅画| www.272982.com-公益公益福彩| www.358648.com-美国的彩票是真的吗| www.456375.com-买珠宝送彩票| www.265757.com-宁夏有福彩中奖的吗| www.333832.com-九州彩票手机客户端| www.414389.com-什么是出彩-| www.91662.cc-台湾好彩10号香烟| www.062235.com-万彩网靠谱不| www.730450.com-福彩快2-| www.964332.com-竞彩2串1如何办理| 500万彩票www.500cd.com| www.fo39.com-浙江体彩6十1| www.uq53.com-体彩走势图乐彩| www.126804.com-高频彩票开奖源| www.181329.cc-3快三走势图青海| www.231153.com-彩29彩票-| www.293190.com-彩票缩水过滤工具|