Jump to content
m.s_shohan

How can I reset automatic javascript slideshow time?

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.

Share this post


Link to post
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.

Share this post


Link to post
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);
				}
			}

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...