ASDASASDSDAD Posted May 15, 2019 Share Posted May 15, 2019 https://www.w3schools.com/howto/howto_js_slideshow.asp used this link and I wanted a slideshow that repeats every 5 seconds. Got that working, bu the three dots and the arrows to change pictures didn't work so I tried combining them. This worked, kind of, but for some reason whenever i clicked to change manually it messed up the automatic timer and just changed randomly and quickly. Not practical at all. Here is my code. <!DOCTYPE html> <html> <link rel="stylesheet" href="HomeStyle.css"> <head> <Title> RPR Architecture Home Page</Title> <style> a#Links{padding: 1px; margin: 0px; font-size:25px;border: 2px solid steelblue} a#Links2{color:white; font-family: Arial; width: 300px; padding: 1px; margin: 0px; font-size:25px; text-decoration: none;} </style> </head> <body> <h1>RPR <i>Architecture</i> & Design</h1> <br> <center><div id="Links"><a href="Photo%20Gallery.html" id="Links2">   Photo Gallery  </a> <a href="Contact.html" id="Links2" style="margin: 0px 1px 0px -3px;">   Contact  </a><a id="Links2" href="About%20RPR.html">  About RPR   </a></div></center> <br><br><br> <div class="slideshow-container"> <!-- Full-width images with number and caption text --> <div class="mySlides fade"> <div class="numbertext"></div> <img src="Pictures/Photo%20Gallery%20Image%206.jpg" border="3" style="width:100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="Pictures/Photo%20Gallery%20Image%204.jpg" border="3" style="width:100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="Pictures/Home%20Page%20Picture.jpg" border="3" style="width:100%"> <div class="text"></div> </div> <!-- Next and previous buttons --> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <br> <!-- The dots/circles --> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </body> <script> var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 4700); } function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 5000); // Change image every 2 seconds Link to comment Share on other sites More sharing options...
Funce Posted May 15, 2019 Share Posted May 15, 2019 So each time you call showSlides, you're setting a new recurring call of showSlides, due to setTimeout. The timeouts don't interfere with each other, as you can see in this tryit. https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_settimeout2 Rather than going setTimeout each time you click a button, you'll need to first clear the current timeOut using clearTimeout. Are you able to give it a go from here? Link to comment Share on other sites More sharing options...
dsonesuk Posted May 15, 2019 Share Posted May 15, 2019 You need to clear the timeout everytime you hover any of the nav or dots. Then you will navigate using either without timer interference, then on mouseout you will restart the timer. You never use mutiple functions with duplicate names as only one will be run on calling. 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