幻燈片不能正常工作

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>