Jump to content

How can I reset automatic javascript slideshow time?


m.s_shohan

Recommended Posts

Hi, this is a automatic slideshow script.


var slideIndex = 0;
function showSlides(n) {
'use strict';
var i,
slides = document.getElementsByClassName("slideshow"),
dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides.style.display = "none";
}
slideIndex++;
if(slideIndex > slides.length) {slideIndex = 1; }
if(slideIndex < 0) { slideIndex = slides.length}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
var timeHandler = setTimeout(showSlides,5000);
}
showSlides(slideIndex);
function plusSlides(n) {
'use strict';
showSlides(slideIndex += n-1);
}
function currentSlide(n) {
'use strict';
showSlides(slideIndex = n-1);
}

Now I want to reset the time when the dots variable is clicked. And set the timeout 5s again. I tried to clear the timeout and invoke the setTimeout var again. But it didn't help. Can you guys please help me to reset the time? Thank you in advance.

Link to comment
Share on other sites

In order for clearTimeout() to work, the timeHandler variable must be accessible.

 

If timeHandler is declared inside the showSlides() function then it can only be access from code inside the showSlides() function.

 

You can make timeHandler global by declaring it in the same place that slideIndex is declared, then it will be accessible from any of the functions.

Link to comment
Share on other sites

I corrected this code like this. But it doesn't seem to work. can you please tell me where is the problem or can you please correct this code? Thank you

            var slideIndex = 0,
				timeHandler,
				dots = document.getElementsByClassName("dot");
            function showSlides(n) {
                'use strict';
                var i,
                    slides = document.getElementsByClassName("slideshow");
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }
				slideIndex++;
				if(slideIndex > slides.length) {slideIndex = 1; }
				if(slideIndex < 0) { slideIndex = slides.length}
                for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(" active", "");
                }
                slides[slideIndex - 1].style.display = "block";
                dots[slideIndex - 1].className += " active";
				timeHandler = setTimeout(showSlides,5000);
            }
            showSlides(slideIndex);
            function plusSlides(n) {
                'use strict';
                showSlides(slideIndex += n-1);
            }
            function currentSlide(n) {
                'use strict';
                showSlides(slideIndex = n-1);
            }
			function resetSliding() {
				dots.click = function() {
					window.clearTimeout(timeHandler);
					timeHandler = window.setTimeout(showSlides,5000);
				}
			}
Link to comment
Share on other sites

This really isn't going to do anything:

function resetSliding() {
  dots.click = function() {
    window.clearTimeout(timeHandler);
    timeHandler = window.setTimeout(showSlides,5000);
  }
}

It's adding a property named "click" to the nodelist and assigning a function to it and there's no point in your code where resetSliding() or dots.click() is called.

 

You can learn how to properly set up events on this page: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...