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>

next- / prev-button看起来像这样：

       <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-tag时停止滑动间隔也是很好的。不幸的是，我不知道该怎么做。

Answer 1

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

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

到此：

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

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

window.clearInterval(interval);

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

重置幻灯片间隔JQuery

1 个答案: