W3自动幻灯片放映2在同一页面上
[英]W3 automatic slideshow 2 on same page
问题描述
我需要2个在一个页面上自动幻灯片播放，但有一个问题。 我用W3幻灯片，但如果我只是一个旋转后进行自动他们或只是停止显示。
这里是代码。 我试图改变，但我不知道我做错了。 如果你能帮助我。
var myIndex = 0; carousel(); var slideId = ["mySlides1", "mySlides2"] function carousel() { var i; var x = document.getElementsByClassName("mySlides", "mySlides2"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 2000); // Change image every 2 seconds }
.mySlides {display:none;} .mySlides2 {display:none;}
<!DOCTYPE html> <html> <head> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <h2 class="w3-center">Automatic Slideshow</h2> <div class="w3-content w3-section" style="max-width:500px"> <img class="mySlides" src="img_la.jpg" style="width:100%"> <img class="mySlides" src="img_ny.jpg" style="width:100%"> <img class="mySlides" src="img_chicago.jpg" style="width:100%"> </div> <h2 class="w3-center">Automatic Slideshow</h2> <div class="w3-content w3-section" style="max-width:500px"> <img class="mySlides2" src="img_la.jpg" style="width:100%"> <img class="mySlides2" src="img_ny.jpg" style="width:100%"> <img class="mySlides2" src="img_chicago.jpg" style="width:100%"> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2019-07-03 12:51:15
我进行了一些编辑，现在您的代码正在运行 ！
您不想只使用一个索引，而是要为每个幻灯片使用一个索引。
对于对carousel()每次调用，您将需要停止显示当前img（n° [x|y]Index ），并显示下一个img（n° [x|y]Index ）。
使用此功能，您可以在每个幻灯片中添加不同数量的图像（在我的示例中， mySlides显示3张图像，而mySlides2具有4张图像）。
let xIndex = 0; let yIndex = 0; carousel(); function carousel() { let x = document.getElementsByClassName("mySlides"); let y = document.getElementsByClassName("mySlides2"); x[xIndex].style.display = "none"; y[yIndex].style.display = "none"; xIndex = (xIndex+1)%x.length; yIndex = (yIndex+1)%y.length; if (xIndex > x.length) xIndex = 1; if (yIndex > y.length) yIndex = 1; x[xIndex].style.display = "block"; y[yIndex].style.display = "block"; setTimeout(carousel, 2000); // Change image every 2 seconds }
<h2>Automatic Slideshow</h2> <div style="width:150px; height:150px; overflow: hidden;"> <img class="mySlides" src="http://lorempixel.com/400/400/" style="width:100%; display: none;"> <img class="mySlides" src="http://lorempixel.com/400/200/" style="width:100%; display: none;"> <img class="mySlides" src="http://lorempixel.com/200/400/" style="width:100%; display: none;"> </div> <h2>Automatic Slideshow</h2> <div style="width:150px; height:150px; overflow: hidden;"> <img class="mySlides2" src="http://lorempixel.com/400/300/" style="width:100%; display: none;"> <img class="mySlides2" src="http://lorempixel.com/300/400/" style="width:100%; display: none;"> <img class="mySlides2" src="http://lorempixel.com/300/300/" style="width:100%; display: none;"> <img class="mySlides2" src="http://lorempixel.com/800/300/" style="width:100%; display: none;"> </div>
W3 Schools 图像幻灯片加载，图像堆叠在一起
[英]W3 Schools image slideshow loads with images stacked on top of each other
使Page符合W3标准后，Java按钮在Firefox中不起作用
[英]Java buttons not working in Firefox when Page is Made W3 Compliant
如何使用 .htaccess 重定向页面但也将其用作 W3 包括
[英]How to use .htaccess to redirect a page but also use it as a W3 include
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.