jQuery基于Swiper制作响应式的图片列表左右滚动，悬停图片遮罩文字切换效果。适用于项目解决方案产品列表响应式布局代码。
使用方法
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>
