我想啓用自動滑塊和無限循環中的JavaScript

Question

<script type="text/javascript"> 
$(document).ready(function() { 

var acch = 1; 
$('.controls ul a').click(function() { 
    var chno = $('.slider-container li').length; 
    switch($(this).attr('data-gallery')){ 
     case 'slide-left': 
      if (acch < chno){ 
       acch++; 
       startSlide(acch); 
      }  
     break; 
     case 'slide-right': 
      if (acch <= 1){ 
       acch = 1; 
      }else{ 
       acch--; 
       startSlide(acch); 
      } 
     break; 
    } 
}) 

function startSlide(itemNo){ 
    var sTo = '#slider-item-' + itemNo; 
    $('#home-top-content').scrollTo($(sTo), 300); 
} 

$('.backToTop').click(function() { 
    $('html, body').animate({scrollTop:0}, 'slow'); 
}) 

}) 
</script> 

這是上面列出我需要啓用自動滑動功能和無限循環 http://aphex.fresh-pixel.com/ 這個腳本的鏈接到我使用的主題，您可以看到在滑塊中的問題

Answer 1

我認爲這個實現更好，因爲您可以在設計中添加任意數量的sildes而不會在代碼中產生任何chage。

<script type="text/javascript"> 
$(document).ready(function() { 

    $('.controls ul a').click(function() { 
     moveSliders($(this)); 
    }) 

    function startSlide(element){ 
     $('#home-top-content').scrollTo(element, 300); 
    } 

    $('.backToTop').click(function() { 
     $('html, body').animate({scrollTop:0}, 'slow'); 
    }) 

    setInterval(function(){ 
     moveSliders($('.controls ul').find('a.arrow-right')); 
     },6000); 

    function moveSliders(clickElement) 
    { 
     //Get li with class active if that count is zero put it as the first li 
     var currentActive = $('.slider-container li.slide-active'); 
     var firstElement = $('.slider-container li:first'); 
     var lastElement = $('.slider-container li:last'); 
     if(currentActive.length == 0){ 
      firstElement.addClass('slide-active'); 
      currentActive = firstElement; 
     } 

     switch(clickElement.attr('data-gallery')){ 
      case 'slide-left': 
       //Next 
       var nextElement = currentActive.next(); 
       if(nextElement.length == 0)nextElement = firstElement; 
       $('.slider-container li.slide-active').removeClass('slide-active'); 
       nextElement.addClass('slide-active'); 
       startSlide(nextElement); 
      break; 
      case 'slide-right': 
       //previous 
       var previousElement = $('.slider-container li.slide-active').prev(); 
       if(previousElement.length == 0)previousElement = lastElement; 
       $('.slider-container li.slide-active').removeClass('slide-active'); 
       previousElement.addClass('slide-active'); 
       startSlide(previousElement); 
      break; 
     } 
    } 

}) 
</script>