zoukankan      html  css  js  c++  java
  • 移动端轮播图效果,插件

    <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>
  • 相关阅读:
    C++各种进制的转换
    C++获取当前目录
    【转】Caffe初试(十)命令行解析
    libsvm下的windows版本中的工具的使用
    libsvm的数据格式及制作
    【转】Windows下使用libsvm中的grid.py和easy.py进行参数调优
    【转】Caffe初试(九)solver及其设置
    【转】Caffe初试(八)Blob,Layer和Net以及对应配置文件的编写
    【转】Caffe初试(七)其它常用层及参数
    Ubuntu 14.04 安装 Sublime Text 3
  • 原文地址:https://www.cnblogs.com/su1637/p/12895942.html
Copyright © 2011-2022 走看看