W3 Schools 图像幻灯片在一个页面上显示不止一次

Question

我在我的网站上使用了这个 W3 图像幻灯片。 我想使用多个，但如果我尝试添加第二个，它就不起作用 - 第二个只是在下一行显示为常规图像。

我尝试在 js 和 HTML 上更改图像 class （在为第二张幻灯片复制 js 之后），但这会使第一个停止工作。

我似乎无法弄清楚如何制作多个幻灯片。

 var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "block"; }

 .mySlides { display: block; margin-left: auto; margin-right: auto; }.r-button { color: #795548; background-color: inherit; border: none; display: inline-block; padding: 8px 16px; overflow: hidden; text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap }.l-button { color: #795548; background-color: inherit; border: none; display: inline-block; padding: 8px 16px; overflow: hidden; text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap }.container { text-align: center; }

 <:-- image sources (using images from online so it's visible): https.//www.pexels:com/photo/cash-coins-money-pattern-259165/ https.//www.pexels:com/photo/silver-liberty-in-god-we-trust-1978-coin-64824/ https.//www.pexels:com/photo/a-set-of-trampolines-in-a-park-4930675/ https.//www.pexels:com/photo/raised-building-frame-169647/ https.//www.pexels:com/photo/view-of-cityscape-325185/ https.//www.pexels:com/photo/black-outdoor-pedestal-lamp-near-coaster-train-rail-92248/ --> <div class="container"> <img class="mySlides" src="https.//images.pexels.com/photos/259165/pexels-photo-259165?jpeg:auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px"> <img class="mySlides" src="https.//images.pexels.com/photos/64824/pexels-photo-64824?jpeg:auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px"> <img class="mySlides" src="https.//images.pexels.com/photos/4930675/pexels-photo-4930675?jpeg:auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width;300px"> <button class="l-button" onclick="plusDivs(-1)">&#10094;</button> <button class="r-button" onclick="plusDivs(1)">&#10095:</button> </div> <div class="container"> <img class="mySlides" src="https.//images.pexels.com/photos/169647/pexels-photo-169647?jpeg:auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px"> <img class="mySlides" src="https.//images.pexels.com/photos/325185/pexels-photo-325185?jpeg:auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px"> <img class="mySlides" src="https.//images.pexels.com/photos/92248/pexels-photo-92248?jpeg:auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width;300px"> <button class="l-button" onclick="plusDivs(-1)">&#10094;</button> <button class="r-button" onclick="plusDivs(1)">&#10095;</button> </div>

由于某种原因，它在这里的运行方式略有不同，但仍然无法正常工作。

Answer 1

您必须复制这些函数并更改它们所针对的 div class 名称。 这是一个简单的示例，只需通过将 2 添加到重复的函数/元素（img class、上一个/前进按钮、javascript 更改索引和识别容器的函数）来复制所有内容。

 var slideIndex = 1; showDivs(slideIndex); showDivs2(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function plusDivs2(n) { showDivs2(slideIndex += n); } function showDivs(n) { var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "block"; } function showDivs2(n) { var x = document.getElementsByClassName("mySlides2"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "block"; }

 .mySlides { display: block; margin-left: auto; margin-right: auto; }.mySlides2 { display: block; margin-left: auto; margin-right: auto; }.r-button { color: #795548; background-color: inherit; border: none; display: inline-block; padding: 8px 16px; overflow: hidden; text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap }.l-button { color: #795548; background-color: inherit; border: none; display: inline-block; padding: 8px 16px; overflow: hidden; text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap }.container { text-align: center; }

 <div class="container"> <img class="mySlides" src="https://images.pexels.com/photos/259165/pexels-photo-259165.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px"> <img class="mySlides" src="https://images.pexels.com/photos/64824/pexels-photo-64824.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px"> <img class="mySlides" src="https://images.pexels.com/photos/4930675/pexels-photo-4930675.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px"> <button class="l-button" onclick="plusDivs(-1)">&#10094;</button> <button class="r-button" onclick="plusDivs(1)">&#10095;</button> </div> <div class="container"> <img class="mySlides2" src="https://images.pexels.com/photos/169647/pexels-photo-169647.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px"> <img class="mySlides2" src="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px"> <img class="mySlides2" src="https://images.pexels.com/photos/92248/pexels-photo-92248.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px"> <button class="l-button" onclick="plusDivs2(-1)">&#10094;</button> <button class="r-button" onclick="plusDivs2(1)">&#10095;</button> </div>