Jump to content

ASDASASDSDAD

Members
  • Content Count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutral

About ASDASASDSDAD

  • Rank
    Newbie
  1. 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"> &nbsp Photo Gallery &nbsp</a> <a href="Contact.html" id="Links2" style="margin: 0px 1px 0px -3px;"> &nbsp Contact &nbsp</a><a id="Links2" href="About%20RPR.html">&nbsp About RPR &nbsp </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)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</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
×
×
  • Create New...