aguy123 Posted June 10, 2016 Share Posted June 10, 2016 (edited) So I'm making a slide show for a specific page on my website. Here's the slideshow page I'm talking about: http://offsavingtheworld.com/extraI have the "previous" and "next" buttons worked out: <button class="w3-btn" onclick="plusDivs(-1)">❮ Prev</button><button class="w3-btn" onclick="plusDivs(1)">Next ❯</button> What I'm trying to create are buttons that show the very first, very last, and a completely random image, if that's even possible. Is this even possible using the code I have here?: <p><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"></p><div class="w3-content" style="max-width:900px;position:relative"><img class="mySlides" src="IMG URL" style="width:100%"/><img class="mySlides" src="IMG URL" style="width:100%"/><img class="mySlides" src="IMG URL" style="width:100%"/><img class="mySlides" src="IMG URL" style="width:100%"/><div class="w3-center"><div class="w3-section"><button class="w3-btn" onclick="plusDivs(-1)">❮ Prev</button><button class="w3-btn" onclick="plusDivs(1)">Next ❯</button></div></div></div></div><script type=text/javascript> slideIndex = 1;showDivs(slideIndex);function plusDivs(n) {showDivs(slideIndex += n);}function showDivs(n) {var i;var x = document.getElementsByClassName("mySlides");if (n > x.length) {slideIndex = 1}if (n < 1) {slideIndex = x.length} ;for (i = 0; i < x.length; i++) {x.style.display = "none";}x[slideIndex-1].style.display = "block";}</script> Sorry if I posted this incorrectly. I'm new to this forum. Edited June 10, 2016 by aguy123 Link to comment Share on other sites More sharing options...
justsomeguy Posted June 10, 2016 Share Posted June 10, 2016 x is an array of elements, so you can access the first or last element, or use Math.rand to get a random number within the range of the array and access that element. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 10, 2016 Share Posted June 10, 2016 (edited) Just use selectIndex set to required index <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <h2 class="w3-center">Manual Slideshow</h2> <div class="w3-content" style="max-width:800px;position:relative"> <img class="mySlides" src="img_fjords.jpg" style="width:100%"> <img class="mySlides" src="img_lights.jpg" style="width:100%"> <img class="mySlides" src="img_mountains.jpg" style="width:100%"> <img class="mySlides" src="img_forest.jpg" style="width:100%"> <a class="w3-btn-floating" style="position:absolute;top:45%;left:-40px" onclick="showDivs(slideIndex=1)">❮❮</a> <a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a> <a class="w3-btn-floating" style="position:absolute;left:47%;bottom:1%" onclick="showDivs(slideIndex=Math.floor((Math.random() * x.length) + 1))">???</a> <a class="w3-btn-floating" style="position:absolute;top:45%;right:0;" onclick="plusDivs(1)">❯</a> <a class="w3-btn-floating" style="position:absolute;top:45%;right:-40px" onclick="showDivs(slideIndex =x.length)">❯❯</a> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } var x; function showDivs(n) { var i; x = document.getElementsByClassName("mySlides") if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "block"; } </script> </body> </html> Edited June 10, 2016 by dsonesuk 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