сброс установленного интервала для слайд-шоу - PullRequest
Новая
       22

сброс установленного интервала для слайд-шоу

1 голос
/ 03 июня 2011

Я только начинаю в 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>

1 Ответ

3 голосов
/ 03 июня 2011

Вы можете очистить интервал, если назначите его переменной с помощью 

window.clearInterval(intervalID)

и назначите интервал, который вы будете использовать, 

var intervalID = setInterval(func, 6000);

В вашем случае вы можете либо перезаписатьинтервал, когда они щелкают, который фактически сбрасывает интервал, или вы можете использовать clearInterval, а затем сбросить его.

Ссылка

РЕДАКТИРОВАТЬ

В вашем случае из вашего комментария я бы просто использовал 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);
};
...