重置幻灯片间隔 JQuery

Question

我用 javascript 和 Jquery 制作了幻灯片放映宽度。但是当用户手动导航到下一张或上一张幻灯片时，我需要重置幻灯片间隔。我对 javascipt 及其语法比较陌生。任何帮助将不胜感激。这是我的代码：

<script type="text/javascript" src="/elements/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    var currentSlideId = 0;
    var slidesAmount = 0;

    function selectSlide(id) {
        jQuery(".startpage-test.slide" + id).show().siblings(".startpage-test").hide();
        jQuery(".slideshow-show-active.slide" + id).addClass("active").siblings(".slideshow-show-active").removeClass("active");
    }

    function nextSlide() {
        currentSlideId++;
        if (currentSlideId >= slidesAmount) currentSlideId = 0;

        selectSlide(currentSlideId);
    }

    function prevSlide() {
        currentSlideId--;
        if (currentSlideId < 0) currentSlideId = slidesAmount - 1;

        selectSlide(currentSlideId);
    }

    jQuery(document).ready(function() {
        slidesAmount = jQuery(".startpage-test").length;

        jQuery(".show_previous").click(function() {
            prevSlide();
            return false;
        });

        jQuery(".show_next").click(function() {
            nextSlide();
            return false;
        });

        window.setInterval(function() {
           nextSlide();
        }, 7000); 
    });

    jQuery("object.flashContent").each(function () {
        swfobject.registerObject(jQuery(this).attr("id"), "9.0.0");
    });
</script>

下一个/上一个按钮看起来像这样：

       <div class="show_next">
                    <a href="#"><span class="slide_nav"><img src="/elements/next.png" width="57" alt="Next"></span></a>
                </div>
           <div class="show_previous">
                    <a href="#"><span class="slide_nav"><img src="/elements/prev.png" width="57" alt="Previous"></span></a>
                </div>

当然，在所有幻灯片中都有一个链接，并且在悬停此 a 标签时停止幻灯片间隔也很好。不幸的是我也不知道该怎么做。

Answer 1

您可以将 setInterval() 的结果分配给一个变量，然后在需要时调用 clearInterval() 传入该变量。因此，在您的情况下，将此代码更改

window.setInterval(function() {
    nextSlide();
}, 

为：

var interval = window.setInterval(function() {
    nextSlide();
}, 

然后，在任何.hover()，.mouseenter()，.click()中> 或您正在使用的任何其他鼠标事件处理程序，只需调用：

window.clearInterval(interval);

当然，当您想要重新启动它时，您需要恢复间隔！