Question

我刚开始在Jquery学习很快，但是我花了几个小时试图找出如何重置间隔，如果有人可以向我解释这个概念它会帮助我很多。我有一个间隔触发点击，每6秒更改一次图像。我希望能够在每次点击时再次以6秒重置该间隔，这样当用户点击以推进幻灯片放映时，下一张图像将在出现之前等待6秒。谢谢！

<html><head><script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
    /*Home Header Slideshow*/
    #headercontainer {width:700px; height:300px; margin-left:-10px; position:relative; overflow:hidden;}
    #nextslide {position:absolute; top:257; left:553; z-index:100; width:47px; height:43px; background:url(images/slidearrow.png)}
    #nextslide:hover {background-position: 0 43px;}
    #gallery{width: 600px; height:300px; position:absolute; left:0px;}
        #gallery a{width:600px; height:300px; position:absolute;}
        .shownslide{display:block; z-index:100;}
        #i1{background:url("images/slideimage1.jpg");}
        #i2{background:url("images/slideimage2.jpg");}
        #i3{background:url("images/slideimage3.jpg");}
        #i4{background:url("images/slideimage4.jpg");}          
    #thumbs{width:100px; height:300px; position:absolute; right:0px;}
        #thumbs a{display:block; width:100px; height:100px; position:relative;}
        #t1{background:url("images/slidethumb1.jpg");}
        #t2{background:url("images/slidethumb2.jpg");}
        #t3{background:url("images/slidethumb3.jpg");}
        #t4{background:url("images/slidethumb4.jpg");}
</style>
</head>
<center>
<div id="headercontainer">
            <a id="nextSlide" href="#"></a>
<div id="gallery">
            <a id="i4" href="#"></a>
            <a id="i3" href="#"></a>
            <a id="i2" href="#"></a>
            <a id="i1" href="#"></a>
</div>
<div id="thumbs">
    <a id="t2" href="#"></a>
            <a id="t3" href="#"></a>
    <a id="t4" href="#"></a>
            <a id="t1" href="#"></a>
 </div>
 </div>
 <script>
var slideDelay = 6000;

$(function(){
    $('#nextSlide').bind('click',nextSlide);
    $('#nextSlide').trigger('click');
    setInterval(nextSlide,slideDelay);
});

function nextSlide(){
    $('#gallery a:last').stop(true, true);
    $('#thumbs a:first').stop(true, true);
    $('#gallery a:last').fadeOut(function() {$(this).remove();});
    $('#gallery a:last').clone().prependTo('#gallery');
    $('#thumbs a:first').slideUp(function() {$(this).remove();});
    $('#thumbs a:first').clone().appendTo('#thumbs');
};

 </script>
 </center>

     </body>
 </html>

Answer 1

如果使用

将其分配给变量，则可以清除间隔

window.clearInterval(intervalID)

并分配您将使用的间隔，

var intervalID = setInterval(func, 6000);

在您的情况下，您可以在点击时覆盖间隔，这实际上会重置间隔，或者您可以使用clearInterval然后重置它。

<强> Reference

修改

在您的情况下，根据您的评论，我只会使用setTimeout代替setInterval。它只被触发一次，但是如果你把它放在nextslide中，它会在已经设置的情况下被清除，然后无论nextSlide()函数如何被调用，每次都会重置。

var timeout = ''; function nextSlide(){ $('#gallery a:last').stop(true, true); $('#thumbs a:first').stop(true, true); $('#gallery a:last').fadeOut(function() {$(this).remove();}); $('#gallery a:last').clone().prependTo('#gallery'); $('#thumbs a:first').slideUp(function() {$(this).remove();}); $('#thumbs a:first').clone().appendTo('#thumbs'); clearTimeout(timeout); timeout = setTimeout(function(){nextSlide()}, slideDelay); };

重置幻灯片放映的设定间隔

1 个答案: