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>

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

软件包
投资组合
价格
关于

jQuery:

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

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

（功能（）{
变量滑块=$（“#滑块”），
imgWid=$（'ul#slidePane img'）.width（），
imgHeight=-300，
imgs=4，
imgsHeight=3200；
$（'slideNav ul li'）。在（'click'，function（）上{
var listSel=$（此），
selImg=$（'slideNav li'）。索引（this）；
$（this.addClass（'active'）；
$（this）.兄弟姐妹（'li'）.removeClass（'active'）；
滑块。动画({
“页边距顶部”：imgHeight*selImg
});
});
})();

• 我将如何和/或在何处应用一个功能，它只是在项目之间自动滚动，一个接一个，直到单击某个项目为止（在这种情况下，自动功能停止）*

现场主持人：

---

如果你想要我的css，请告诉我。我觉得这与这个问题无关。

我想我还是用老式的、直截了当的方式来做吧。我只是在寻找一个更简单的方法：-（我会在这里发布结果