添加多个图像幻灯片

Question

I have this worksheet to complete and one of the questions is to explain this code and to add one more image slideshow.

I don't really understand the javascript code and a bit confused as to how to add another image slideshow.

I understand the HTML and css but the javascript is confusing. Any help would be appreciated.

 var slideIndex = [1,1]; var slideId = ["mySlides1", "mySlides2"] showSlides(1, 0); showSlides(1, 1); function plusSlides(n, no) { showSlides(slideIndex[no] += n, no); } function showSlides(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; }

 * {box-sizing: border-box}.mySlides1, .mySlides2 {display: none} img {vertical-align: middle;} /* Slideshow container */.slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a grey background color */.prev:hover, .next:hover { background-color: #f1f1f1; color: black; }

 <h2 style="text-align:center">Multiple Slideshows</h2> <p>Slideshow 1:</p> <div class="slideshow-container"> <div class="mySlides1"> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" style="width:100%"> </div> <div class="mySlides1"> <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" style="width:100%"> </div> <div class="mySlides1"> <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a> <a class="next" onclick="plusSlides(1, 0)">&#10095;</a> </div> <p>Slideshow 2:</p> <div class="slideshow-container"> <div class="mySlides2"> <img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" style="width:100%"> </div> <div class="mySlides2"> <img src="https://homepages.cae.wisc.edu/~ece533/images/sails.png" style="width:100%"> </div> <div class="mySlides2"> <img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a> <a class="next" onclick="plusSlides(1, 1)">&#10095;</a> </div>

Answer 1

I updated the code using an IDE to be human readable. I believe it is pretty straight forward now. If you don't understand specific parts you can ask me in comments. (This not quality code, I believe it's a learning exercise so I kept it as it is)

 var slideIndex = [1, 1, 1]; var slideContainerSelectors = ["mySlides1", "mySlides2", "mySlides3"] function showSlides(nextslideIndex, slideContainerIndex) { var i; var slideContainerElement = document.getElementsByClassName(slideContainerSelectors[slideContainerIndex]); if (nextslideIndex > slideContainerElement.length) { slideIndex[slideContainerIndex] = 1 } if (nextslideIndex < 1) { slideIndex[slideContainerIndex] = slideContainerElement.length } for (i = 0; i < slideContainerElement.length; i++) { slideContainerElement[i].style.display = "none"; } slideContainerElement[slideIndex[slideContainerIndex] - 1].style.display = "block"; } function plusSlides(increment, index) { showSlides(slideIndex[index] += increment, index); //----------------------------^ slideIndex[index] = slideIndex[index] + increment } showSlides(1, 0); showSlides(1, 1); showSlides(1, 2);

 * { box-sizing: border-box }.mySlides1, .mySlides2 { display: none } img { vertical-align: middle; } /* Slideshow container */.slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a grey background color */.prev:hover, .next:hover { background-color: #f1f1f1; color: black; }

 <h2 style="text-align:center">Multiple Slideshows</h2> <p>Slideshow 1:</p> <div class="slideshow-container"> <div class="mySlides1"> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" style="width:100%"> </div> <div class="mySlides1"> <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" style="width:100%"> </div> <div class="mySlides1"> <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a> <a class="next" onclick="plusSlides(1, 0)">&#10095;</a> </div> <p>Slideshow 2:</p> <div class="slideshow-container"> <div class="mySlides2"> <img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" style="width:100%"> </div> <div class="mySlides2"> <img src="https://homepages.cae.wisc.edu/~ece533/images/sails.png" style="width:100%"> </div> <div class="mySlides2"> <img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a> <a class="next" onclick="plusSlides(1, 1)">&#10095;</a> </div> <p>Slideshow 3:</p> <div class="slideshow-container"> <div class="mySlides3"> <img src="https://picsum.photos/200/300" style="width:100%"> </div> <div class="mySlides3"> <img src="https://picsum.photos/id/237/200/300" style="width:100%"> </div> <div class="mySlides3"> <img src="https://picsum.photos/id/238/200/300" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a> <a class="next" onclick="plusSlides(1, 2)">&#10095;</a> </div>