CODEWITHSUNDEEP
javascriptjqueryresetslideintervals
eye-wonder
eye-wonder

Reputation: 1193

Reset slide interval JQuery

I've made a slide show width a javascript and Jquery. But I need to reset the slide interval when the user is navigating manualy to the next or previous slide. I am relatively new to javascipt and it's syntax. Any help will be appriciated. Here is my code:

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

The next-/prev-button looks like this:

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

In all slides there is a link of course, and it would also be nice to stop the slide interval when hovering this a-tag. Unfortunately I don't know how to do this either.

Upvotes: 0

Views: 1954

Answers (1)

chrisfrancis27
chrisfrancis27

Reputation: 4536

You can assign the result of setInterval() to a variable, then call clearInterval() passing in that variable whenever you need. So in your case, change this code:

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

to this:

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

Then, in any.hover(), .mouseenter(), .click() or whatever other mouse event handler you are using, simply call:

window.clearInterval(interval);

Of course, you need to reinstate the interval when you want to restart it!

Upvotes: 1

Related Questions