的jQuery：爲幻燈片創建自動計時器 - 點擊

取消所以，我有功能的幻燈片。這是我第一次使用jQuery進行幻燈片播放，而不使用額外的插件。這是非常基本和硬編碼（這不應該是我希望的問題）。的jQuery：爲幻燈片創建自動計時器 - 點擊

我想實現自動滾動效果每8秒到下一個項目，然後跳到開頭結尾。我有一個想法如何做到這一點，但我想，以達到最佳的做法與我的設計

HTML：

<div id="slideWrap"> 
<div id="slides"> 
    <ul id="slidePane"> 
     <li><img src="css/images/slides/slide1.png" alt="img1" /></li> 
     <li><img src="css/images/slides/slide2.png" alt="img2" /></li> 
     <li><img src="css/images/slides/slide3.png" alt="img3" /></li> 
     <li><img src="css/images/slides/slide4.png" alt="img4" /></li> 
    </ul> 
</div> 
<div id="slideNav"> 
    <ul> 
     <li class="active"><h2>Packages</h2></li> 
     <li><h2>Portfolio</h2></li> 
     <li><h2>Prices</h2></li> 
     <li><h2>About</h2></li> 
    </ul> 
</div> 
</div>

的jQuery：

<script> 
(function() { 
var slider = $('#slides'), 
     imgWid = $('ul#slidePane img').width(), 
     imgHeight = -300, 
     imgs = 4, 
     imgsHeight = 3200; 

$('#slideNav ul li').on('click', function() { 
     var listSel = $(this), 
      selImg = $('#slideNav li').index(this); 

     $(this).addClass('active'); 
     $(this).siblings('li').removeClass('active'); 
     slider.animate({ 
      'margin-top': imgHeight * selImg 
     }); 
    }); 
})(); 
</script>