幻灯片不能正常工作

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代码 - 第二幻灯片我复制这两个“幻灯片放映”之间的代码笔记成不同的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）。

这里的工作小提琴（当然，在某种意义上工作，图像各个击破，但脚本作品）：从@ mark.hch https://jsfiddle.net/cchvncnd/

Answer 2

伟大的答案。 但是，如果你想坚持与当前类。而让功能自动重复它，您可以使用此代码，请查看它

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>