幻灯片放映不工作

Question

（抱歉，如果这个问题的答案非常简单！！）。无论如何，我正在尝试在一页上制作两个幻灯片。虽然只有一个曾经出现过。虽然我已经为第二个代码添加了所有代码，但页面上只有第一个代码可见。

我只能保留基本代码，但如果这是问题所在，我可以对 javascript 做任何事情。

javascript。我不确定这是什么意思（再次抱歉），但它适用于一个横幅

<!-- script for slideshow ((copied from http://www.w3schools.com/w3css/w3css_slideshow.asp!)) -->
<script>
var myIndex = 0;
carousel();



function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    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, 1000);    <!-- time between slide change -->

    }
</script>

html 代码 - 对于第二张幻灯片，我将这两个 'slideshow' 注释之间的代码复制到不同的 div（并更改了图片文件名）

    <!--slideshow-->
<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
    <!--END slideshow-->

这是 css（只是相关容器规格）。

/* Slideshow container */
.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
}

.mySlides {
    position: relative;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    width: 500px;
    margin: auto;
    border-radius: 25px;
}

提前致谢！！

Answer 1

如果您复制了具有相同元素的 div，并保留了 class 名称，那么只出现一个幻灯片是有道理的 - 但它应该是播放两组的幻灯片图像（或副本，如果集合相同）。这是一个有点简单的修复。首先，为第二组图像重命名 class，因此您的 HTML 将类似于：

<div class="slideshow-container">
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>

<div class="slideshow-container">
<img class="mySlides2" src="images/2img1.jpg" alt="2img1.jpg">
<img class="mySlides2" src="images/2img2.jpg" alt="2img2.jpg">
<img class="mySlides2" src="images/2img3.jpg" alt="2img3.jpg">
<img class="mySlides2" src="images/2img4.jpg" alt="2img4.jpg">
<img class="mySlides2" src="images/2img5.jpg" alt="2img5.jpg">
<img class="mySlides2" src="images/2img6.jpg" alt="2img6.jpg">
</div>

然后你基本上可以将一张幻灯片所需的代码加倍，并将其设置为使用第二组图像的 class。可能很难在脑海中描绘出来，但您可以在这里看到它：

var xIndex = 0, yIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var y = document.getElementsByClassName("mySlides2");

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }

  for (i = 0; i < y.length; i++) {
    y[i].style.display = "none";  
  }

  xIndex++;
  if (xIndex > x.length) {xIndex = 1}    
  x[xIndex-1].style.display = "block";  

  yIndex++;
  if(yIndex > y.length) {yIndex = 1}
  y[yIndex-1].style.display = "block";

  setTimeout(carousel, 1000);
}

您可以看到我创建了一个 yIndex 变量，并将 y 用于 .mySlides2 个元素（而不是 mySlides）。我专门针对 y 而不是 x 将循环加倍，并以与 xIndex 相同的方式递增 yIndex（如果超过最大图像数，则将其设置为 1，并设置要显示的下一张图像）。

这是有效的 Fiddle（好吧，在某种意义上有效，图像都坏了，但脚本有效）：https://jsfiddle.net/cchvncnd/

Answer 2

来自@mark.hch 的出色回答。但是，如果你想坚持使用当前 Class。并让函数自动迭代它，你可能会用到这段代码，请查看

var myIndex = [];
carousel();

function carousel() {
  var i, j;
  var con = document.getElementsByClassName("slideshow-container");
  for (j = 0; j < con.length; j++) {
    myIndex[j] = myIndex[j] || 0;
    for (i = 0; i < con[j].children.length; i++) {
      con[j].children[i].style.display = "none";
    }
    if (myIndex[j] >= con[j].children.length) {
      myIndex[j] = 0;
    }    
    con[j].children[myIndex[j]].style.display = "block";
    myIndex[j] ++;
  }
  setTimeout(carousel, 1000); <!-- time between slide change -->    
}

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  display: inline-block;
  height: 200px;
  width: 500px;
  border: 1px solid green;
}
.mySlides {
  position: relative;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 25px;
}

<div class="slideshow-container">
  <img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg">
  <img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg">
  <img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg">
  <img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg">
  <img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg">
  <img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg">
</div>
<div class="slideshow-container">
  <img class="mySlides" src="images/1img1.jpg" alt="1img1.jpg">
  <img class="mySlides" src="images/1img2.jpg" alt="1img2.jpg">
  <img class="mySlides" src="images/1img3.jpg" alt="1img3.jpg">
  <img class="mySlides" src="images/1img4.jpg" alt="1img4.jpg">
  <img class="mySlides" src="images/1img5.jpg" alt="1img5.jpg">
  <img class="mySlides" src="images/1img6.jpg" alt="1img6.jpg">
</div>

幻灯片放映不工作

Slideshow not working

html

javascript

jquery

slideshow