的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>