m.s_shohan Posted November 4, 2016 Share Posted November 4, 2016 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 More sharing options...
Ingolme Posted November 4, 2016 Share Posted November 4, 2016 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 More sharing options...
m.s_shohan Posted November 4, 2016 Author Share Posted November 4, 2016 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 More sharing options...
Ingolme Posted November 4, 2016 Share Posted November 4, 2016 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 More sharing options...
dsonesuk Posted November 4, 2016 Share Posted November 4, 2016 It is not reset, but pause, and instead of click wouldn't moouseover or mouseout be better, considering you will have to implement a toggle to swap from pause click to start click. See http://w3schools.invisionzone.com/index.php?showtopic=55499&hl=slideshow which includes pause/restart code. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now