我需要在一个页面上自动放映 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>最佳答案
我做了一些编辑，现在你的代码 is working !
你不想只使用一个索引，你想为每个幻灯片使用一个索引。
每次调用 carousel() 时，您都需要停止显示当前 img (n°[x|y]Index)，并显示下一个 img ( n°[x|y]索引).
使用此功能，您可以在每个幻灯片放映中添加不同数量的图像(在我的示例中，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>关于javascript - 同页W3自动幻灯片2，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56870071/