Home/ Questions/Q 5981663
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T21:58:32+00:00

I’m just beginning in Jquery and learning pretty quickly, but I spent the past

  • 0

I’m just beginning in Jquery and learning pretty quickly, but I spent the past few hours trying to figure out how to reset an interval, if someone could please explain this concept to me it would help me out a lot. I have an interval firing a click that changes the image every 6s. I would like to be able to reset that interval again at 6s every time that click is fired, so that when a user clicks to advance the slideshow the next image will wait 6 seconds before appearing. thanks!

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can clear an interval if you assign it to a variable using 

    window.clearInterval(intervalID)

    and to assign an interval you would use,

    var intervalID = setInterval(func, 6000);

    In your case you could either overwrite the interval when they click, which in effect will reset the interval, or you can use clearInterval and then reset it.

    Reference

    EDIT

    In your case, from your comment I would just use setTimeout instead setInterval. Its only fired once, but if you put it in nextslide, it will get cleared if its already set, and then reset every time regardless of how the nextSlide() function is called.

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