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代码 - 对于第二张幻灯片，我在这两个幻灯片＆＃39;之间复制了代码。注意到不同的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，并且单独留下了类名，那么只有一个幻灯片显示才有意义 - 但它应该是播放两组图像的幻灯片（或者重复，如果这些是相同）。这是一个简单的修复方法。首先，为第二组图像重命名该类，因此您的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>

然后，您基本上可以将一个幻灯片显示所需的代码加倍，并将其设置为使用第二组图像的类。可能难以想象你的脑袋，但你可以在这里看到它：

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，并设置要显示的下一个图像）。

这是一个有效的小提琴（好吧，从某种意义上来说，图像都破了，但剧本有效）：https://jsfiddle.net/cchvncnd/

Answer 2

来自@ mark.hch的精彩回答。但是，如果你想坚持当前的类。并让函数自动迭代它，您可以使用此代码，请查看它

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>

幻灯片无效

2 个答案: