Question

所以，我有一个幻灯片功能。这是我第一次使用jQuery进行幻灯片演示而不使用其他插件。这是非常基本和硬编码（我希望这不应该是一个问题）。

我希望每8秒对下一个项目实现一次自动滚动效果，然后跳到最后的开头。我有一个IDEA怎么做，但我希望通过我的设计实现最佳实践

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>

如何以及在何处应用一个功能，它只是逐个自动滚动项目，直到点击某些内容（在这种情况下自动功能停止）？ *

直播主持人：

http://www.sinsysonline.com/design

如果你喜欢我的CSS，请告诉我。我觉得这个问题无关紧要。

Answer 1

我想我会用老式的，简洁的方式做到这一点。只是想找一个更简单的方法:-(我会在这里发布结果。

jQuery：为幻灯片创建自动计时器 - 点击取消

1 个答案: