jquery - jQuery: スライドショー用の自動タイマーを作成する - クリックでキャンセル

Question

だから、私はスライドショー機能を持っています。これは、追加のプラグインを使用せずに 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>

• 何かがクリックされるまでアイテムを1つずつ垂直に自動スクロールする機能をどのように、またはどこに適用しますか(この場合、自動機能は停止します)? *

ライブホスト:

http://www.sinsysonline.com/design

私のcssをご希望の場合はお知らせください。質問とは無関係だと思います。