如何修改滑塊代碼計數器？

Question

我有一個內容滑塊，並且內容滑塊的計數器基於使用cnt.text（i + 1 +'/'+ amount）更新;但不是顯示一個數字計數器，而是我想讓它顯示子彈而不是分配一個活動的類。

這裏的下方的jsfiddle：http://jsfiddle.net/REn8C/2/

HTML滑塊是：

<div class="homepageslider_imageholder"> 
    <ul id="sliderbannerlist" class="homepageslider_imageslist"> 
     <li class="acslide slide1" style=""> 
      <div class="acslidecontainer"> 
       SLIDE 1 HERE 
       <div class="clear"></div> 
      </div> 
     </li> 
     <li class="acslide slide2" style="display: none;"> 
      <div class="acslidecontainer"> 
       SLIDE 2 HERE 
       <div class="clear"></div> 
      </div> 
     </li> 
     <li class="acslide slide3" style="display: none;"> 
      <div class="acslidecontainer"> 
       SLIDE 3 HERE 
       <div class="clear"></div> 
      </div> 
     </li> 
     <li class="acslide slide4" style="display: none;"> 
      <div class="acslidecontainer"> 
       SLIDE 4 HERE 
       <div class="clear"></div> 
      </div> 
     </li> 
    </ul> 

    <!-- Slide Pager: Start --> 
    <div id="slidecounter" class="homepageslider_pagerholder"> 
     <ul class="homepageslider_pagerlist"> 
      <li><span></span></li> 
      <li class="active"><span></span></li> 
      <li><span></span></li> 
      <li><span></span></li> 
     </ul> 

     <div class="clear"></div> 
    </div> 
    <!-- Slide Pager: End --> 

    <div class="clear"></div> 
</div> 

這裏是CSS：

div.homepageslider {} 
div.homepageslider_holder {} 
    div.homepageslider_inner { 
     position: relative; 
     margin: 0 auto; 
     width: 929px; 
     height: 318px; 
     border: 9px solid #fff; 
     background: #d7c288; 

     -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.15); 
     -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.15); 
     box-shadow:   0 0 25px rgba(0, 0, 0, 0.15); 
     } 

     /* Navigation */ 
     div.homepageslider_nav { 
      position: absolute; 
      top: 35px; 
      right: 0; 
      z-index: 50; 
      width: 155px; 
      } 
      ul.homepageslider_navlist { 
       margin: 0; 
       padding: 0; 
       list-style-type: none; 
       } 
       ul.homepageslider_navlist li { 
        margin: 0 0 3px !important; 
        display: block; 
        width: 155px; 
        height: 25px; 
        font-size: 12px; 
        letter-spacing: -0.75px; 
        line-height: auto; 
        list-style-type: none; 
        } 
        ul.homepageslider_navlist a { 
         padding: 0 0 0 12px; 
         display: block; 
         height: 25px; 
         color: #fff; 
         text-decoration: none !important; 
         text-transform: uppercase; 
         background-color: #736056; 

         text-shadow: 1px 1px 0 #40352f; 
         -webkit-transition: all 0.3s ease-in-out; 
         -moz-transition: all 0.3s ease-in-out; 
         -ms-transition:  all 0.3s ease-in-out; 
         -o-transition:  all 0.3s ease-in-out; 
         transition:   all 0.3s ease-in-out; 
         } 
         ul.homepageslider_navlist a:hover { 
          background-color: #40352f; 
          } 
         ul.homepageslider_navlist span { 
          display: block; 
          height: 25px; 
          line-height: 25px; 
          } 

     /* Image Holder */ 
     div.homepageslider_imageholder { 
      position: relative; 
      z-index: 40; 
      margin: 0; 
      padding: 0; 
      width: 929px; 
      height: 318px; 
      } 
      ul#sliderbannerlist { 
       margin: 0; 
       padding: 0; 
       list-style-type: none; 
       } 
       ul#sliderbannerlist li.acslide { 
        position: absolute; 
        top: 0; 
        left: 0; 
        z-index: 5; 
        width: 929px; 
        height: 318px; 
        list-style-type: none; 
        } 
        ul#sliderbannerlist div.acslidecontainer { 
         width: 929px; 
         height: 318px; 
         } 
         ul#sliderbannerlist img {} 

      /* Pager Holder */ 
      div.homepageslider_pagerholder { 
       position: absolute; 
       bottom: 0; 
       left: 50%; 
       z-index: 50; 
       margin: 0 0 0 -40px; 
       padding: 0 9px; 
       height: 22px; 
       background-color: #fff; 
       } 
       ul.homepageslider_pagerlist { 
        margin: 0; 
        padding: 0; 
        list-style-type: none; 
        } 
        ul.homepageslider_pagerlist li { 
         margin: 7px 5px 0; 
         padding: 0; 
         display: block; 
         float: left; 
         width: 8px; 
         height: 8px; 
         list-style-type: none; 
         } 
         ul.homepageslider_pagerlist li.active {} 
         ul.homepageslider_pagerlist span { 
          display: block; 
          width: 8px; 
          height: 8px; 
          cursor: pointer; 
          background-color: #89c2b2; 

          -webkit-border-radius: 5px; 
          -moz-border-radius:  5px; 
          border-radius:   5px; 
          } 
          ul.homepageslider_pagerlist li.active span { 
           background-color: #595656; 
           } 

滑塊插件是：

(function($){ 
    $.fn.acSlider = function(interval) { 
     var slides; 
     var cnt; 
     var amount; 
     var i; 

     function run() { 
      // Hiding previous slide and showing next 
      $(slides[i]).fadeOut(1000); 
      i++; 
      if (i >= amount) i = 0; 
      $(slides[i]).fadeIn(1000); 

      // Updating Counter 
      cnt.text(i+1+'/'+amount); 

      // Loop 
      setTimeout(run, interval); 
     } 

     slides = $('#sliderbannerlist').children(); 
     cnt  = $('#slidecounter'); 
     amount = slides.length; 
     i=0; 

     // Updating Counter 
     cnt.text(i+1+'/'+amount); 

     setTimeout(run, interval); 
    }; 
})(jQuery); 

現在，由於有4張幻燈片，#slidecounter裏面的計數器會增加1/4，2/4，3/4，4/4。相反，我想用我在我的HTML的櫃檯，用類轉換到活動子彈：

<!-- Slide Pager: Start --> 
    <div id="slidecounter" class="homepageslider_pagerholder"> 
     <ul class="homepageslider_pagerlist"> 
      <li><span></span></li> 
      <li class="active"><span></span></li> 
      <li><span></span></li> 
      <li><span></span></li> 
     </ul> 

     <div class="clear"></div> 
    </div> 
    <!-- Slide Pager: End --> 

如何修改jQuery插件使計數器被修改的工作方式我想要它？

Answer 1

首先你要創建生成子彈的代碼。一些諸如：

for (z = 0; z < amount; z++) { 
    $(".homepageslider_pagerlist").append('<li><span></span></li>'); 
} 

然後你會想一些代碼附加新活動類：

$(".homepageslider_pagerlist li").eq(i - 1).addClass('active'); 

注1.本減法是因爲EQ選擇是基於0的

A little JSFiddle demo

編輯：你也想從其他李的刪除類。很簡單，只需使用removeClass（'active'）