移动端轮播图效果，插件

<div id='slider' class='swipe swipesh'>
    
           <div class='swipe-wrap'>
               <div>
                   <div class="wl4_1">
                       <div class="wl4_2">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                       <div class="wl4_2 wl4_2s">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                       <div class="wl4_2 wl4_2s">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                       <div class="wl4_2">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                 </div>
                </div>
                 <div>
                   <div class="wl4_1">
                       <div class="wl4_2">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                       <div class="wl4_2 wl4_2s">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                       <div class="wl4_2 wl4_2s">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                       <div class="wl4_2">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                 </div>
                </div>
                 <div>
                   <div class="wl4_1">
                       <div class="wl4_2">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                       <div class="wl4_2 wl4_2s">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                       <div class="wl4_2 wl4_2s">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                       <div class="wl4_2">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                 </div>
                </div>
                  <div>
                   <div class="wl4_1">
                       <div class="wl4_2">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                       <div class="wl4_2 wl4_2s">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                       <div class="wl4_2 wl4_2s">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                       <div class="wl4_2">
                             <div class="wl4_2_1">北京市 - 苏州市</div>
                             <div class="wl4_2_2">
                                  <p>1.2元/公斤<del>(2.7)</del></p>
                                  <p>252.0/立方<del>(2.7)</del></p>
                             </div>
                             <div class="wl4_2_3">7折</div>
                       </div>
                 </div>
                </div>
                 
            </div>
            
            
            <div id="title-box" class="ol1">
                  <ul id="title-box-ul">
                       <li class="title-index active"></li>
                       <li class="title-index"></li>
                       <li class="title-index"></li>
                       <li class="title-index"></li>
                  </ul>
             </div>
            
     </div>

.swipe_1 {overflow: hidden;visibility: hidden;position: relative;}
.swipe-wrap_1{overflow: hidden;position: relative;}
.swipe-wrap_1 > div {float:left;width:100%;position: relative;}
.swipe-wrap_1 > div > img {width: 100%;vertical-align: top;}

#title-box_1 {height: 0.3rem; width: 100%; position: absolute; left: 0; bottom: 0.1rem; }
#title-box-ul_1 {position: absolute; right: 36%; top: 0; font-size: 1em; }
#title-box-ul_1 li {width: 0.3rem; height: 0.06rem; line-height: 30px; float: left; background:#ffffff; margin:0 0.1rem; border-radius:1.1rem; opacity:0.6;}
#title-box-ul_1 li.active_1 { background:#c0333f; opacity:1;}

.swipe {overflow: hidden;visibility: hidden;position: relative; padding-bottom:1rem}
.swipe-wrap {overflow: hidden;position: relative;}
.swipe-wrap > div {float:left;width:100%;position: relative;}
.swipe-wrap > div > img {width: 100%;vertical-align: top;}

#title-box {height: 0.3rem; width: 100%; position: absolute; left: 0; bottom: 0.1rem; text-align:center;}
#title-box-ul {  margin:0 auto; height:1rem; text-align:center; font-size: 1em; text-align:center; display:inline-block; }
#title-box-ul li {width: 0.1rem; height: 0.1rem; line-height: 30px; float: left; background:#fff; margin:0 0.1rem; border-radius:1rem; display:inline-block;text-align:center;}
#title-box-ul li.active{ background:#ffc936; width:0.3rem;}

<script src="http://m.hcgroup.com/cn/js/jquery-1.10.2.min.js"></script>
<script src="http://m.hcgroup.com/cn/js/jquery_self.js"></script>
<script src="http://m.hcgroup.com/cn/js/swipe.js"></script>
<script src="https://style.org.hc360.com/js/M-hc/jquery_self.js"></script>
<script>
// 初始化swipe插件
var aLi_1= document.getElementsByClassName('title-index');
window.mySwipe = Swipe(document.getElementById('slider'), {
 startSlide: 0,
   speed: 900,
   auto: 3000,
   continuous: true,
   disableScroll: false,
   stopPropagation: false,
   callback: function(index,elem) {
  var i = aLi_1.length;
  while (i--) {
   aLi_1[i].className = 'title-index';
  }
  aLi_1[index].className = 'title-index active';
 }
});

</script>