Блог

Главная - Вопросы по программированию - сброс установленного интервала для слайд-шоу

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

#jquery #slideshow #setinterval

#jquery #слайд-шоу #setinterval

Вопрос:

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

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

 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);
};

Комментарии:

1. хорошо, да, я понимаю, как использовать оба этих setInterval и clearInterval. Проблема, с которой я сталкиваюсь, заключается в том, как я бы сбросил интервал при нажатии.