將子彈控件添加到選項卡式幻燈片

Question

希望有人知道如何做到這一點。我是編程新手，無法找到答案或在其他地方找到答案。我想要做的是添加一個輔助控件到現有的選項卡式幻燈片。輔助控制將鏈接成爲活動和不活動的子彈，就像現有鏈接在幻燈片播放和點擊時一樣。

你可以看到我在這裏的例子http://jsfiddle.net/j08691/ZSPX3/1/。 jQuery代碼如下。預先感謝您的幫助。

var HM = { 
    //tab 
    jqs_slideList: '.slideList', 
    jqs_tabList: '.slides .carouselLinks', 


    init: function() { 
     //init sliders 
     var aSliders = $(this.jqs_slideList); 
     if (aSliders.length > 0) { 
      this.slideShow(aSliders); 
     } 

     //init the carousels that are lists of links 
     $('.carousel.icons').hellmannsCrsl({ 
      rotateSpeed: 5000, 
      viewport: '.carouselLinks' 
     }); 
    }, 

    slideShow: function(eSlideListParam) { 
     var slideList = eSlideListParam, 
      slides = slideList.find('li'), 
      tabList = slideList.siblings('.carouselLinks'), 
      tabs = tabList.find('li'), 
      speed = 500; 


     tabs.on('click', 'a', function(e) { 
      $(this).trigger('slides.swap'); 
      e.preventDefault(); 
     }); 

     //make it automatic, but this doesn't work properly, I'm stuck... 
     setInterval(function() { 
      var current = parseInt($('li.selected a').data('links-to').split('_')[1],10); 
      var idx=current-1; 
      var max = $('.carouselLinks li a').length; 
      idx = (current<max) ? (idx+1):0; 
      $('a:eq('+idx+')').trigger('click'); 
     }, 3000); 

     /** 
     * This is where the animation, i.e. fade, is performing. 
     * I find it quite convenient to use bind/trigger principle as it's easier to maintain 
     */ 
     tabs.find('a').bind('slides.swap', function() { 
      var self = $(this), 
       selfIndex = self.parent().index(), 
       targetSlide = slides.eq(selfIndex); 

      //fade in/out slides 
      slides.filter('.active').stop(true, false).fadeOut(speed, function() { 
       $(this).removeClass('active'); 
      }); 
      targetSlide.stop(true, false).fadeIn(speed).addClass('active'); 

      tabs.removeClass('selected'); 
      self.parent().addClass('selected'); 
     }); 
    } 
}; 

HM.init(); 

Answer 1

這裏有一個Fiddle

HTML

<!-- bullet ctrl --> 
<div class="bulletLinks"> 
    <ul> 
     <li><a data-links-to="slide_1" href="#">1</a></li> 
     <li class="selected"><a data-links-to="slide_2" href="#">2</a></li> 
     <li><a data-links-to="slide_3" href="#">3</a></li> 
     <li><a data-links-to="slide_4" href="#">4</a></li> 
    </ul> 
</div> 
<!-- /bullet ctrl --> 

CSS

.bulletLinks a { 
    background: #900; // Or bullet background image 
    display: block; 
    float: left; 
    width: 20px; 
    height: 20px; 
    margin-right: 7px; 
    text-align: center; 
    text-decoration: none; 
    color: #fff; 
    border-radius: 50%; 
    transition: all 0.2s linear; 
} 
.bulletLinks a:hover { 
    background: #999; 
    color: #fff; 
} 

jQuery的代碼編輯

tabList = slideList.siblings('.carouselLinks, .bulletLinks'),