滑塊前進按鈕上的jQuery setInterval

我正在嘗試做一個滑塊並且遇到一些問題。您可以看到我有一個#timer按鈕，當您單擊該按鈕時，它會推進下一張幻燈片，沒有任何問題用它。滑塊前進按鈕上的jQuery setInterval

但我希望它點擊自身，所以我想使用setInterval但不能這樣做。另外，關於觸發第一次點擊navitem沒有問題，但不能在該按鈕上設置setInterval。

<script type="text/javascript"> 
$(window).load(function() { 
    $('.slideritem p').stop(true).show(1000); 
}); 

$(document).ready(function() { 
    $('.slideritem').hide(); 
    $('.slideritem:first').fadeIn(1000); 

    $('.navitem').click(function() { 
     var index = $('.navitem').index(this) 
     var indexlast = $('.navitem').index(this) + 1 
     $('.slideritem').hide(); 
     $('.slideritem:nth-child(' + indexlast + ')').stop(true).fadeIn(1000); 
     $('.navitem img ').removeClass('current'); 
     $('.navitem:nth-child(' + indexlast + ') img ').addClass('current'); 

     $('#timer').click(function() { 
      index++$('.slideritem').hide(); 
      $('.slideritem').eq(index).fadeIn(1000); 
      $('.navitem img').removeClass('current'); 
      $('.navitem img').eq(index).addClass('current'); 

      if (index == 3) { 
       index = -1 
      } 
     }); 
    }); 

    $('.navitem:first').trigger('click'); 
    setInterval($('#timer').trigger('click'), 1500); 
});  
</script>

來源

2013-08-21 user2694307

小提琴。 –

@Tushar Gupta http://jsfiddle.net/YjEzD/ – user2694307

不要爲此觸發點擊事件。這是一個壞習慣。

爲滑動效果製作單獨的功能。然後分別從點擊和計時器中調用它。

應該是這樣的：

function Slide() { 
    // Perform the sliding here 
} 

$('#timer').click(Slide); 

setInterval(Slide,1500);

我做了你的代碼的一些改進，現在它的工作。還有幾件事情可以改善...

jsFiddle Demo

來源

2013-08-21 09:27:03 Itay

爲什麼這是一個壞習慣？ – putvande

這是一個滑塊，但它沒有幻燈片效果，它有一些淡入淡出效果。這裏的小提琴http://jsfiddle.net/YjEzD/ – user2694307

@putvande我相信這是一個壞習慣，因爲也許點擊事件將有一天會做其他除滑動以外的動作，但間隔仍然應該只滑動。所以肌酸一個單獨的滑動功能是最佳做法 – Itay

滑塊前進按鈕上的jQuery setInterval

回答

相關問題