スライドショーが動作しません

Question

（この質問がありましたら申し訳ありませんが簡単回答です!!）とにかく、1ページに2つのスライドショーを作成しようとしています。ただ1つだけが表示されます。 2番目のコードをすべて追加したように、最初のコードだけがページに表示されます。

私は、基本的なコードを維持するために許可されていますが、それが問題である何場合はJavaScriptで何でも行うことができます。

The javascript。私はそれが何を意味するのかわからないんだけど（ごめん再び）しかし、それは1つのバナーのために働く

<!-- 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にそれらの2つの「スライドショー」のノート間のコードをコピーした二スライドショーの（そしてこれは、CSS（ちょうど関連するコンテナ 仕様）である）

<!--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--> 

画像のファイル名を変更しました。

/* 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は次のようになります。そして、あなたは、基本的には、1つのスライドショーに必要なコードを倍増させることができます

<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変数を作成し、.mySlides2要素（代わりのmySlides）にYを使用見ることができます。 xの代わりにyのループを倍増させ、xIndexと同じ方法でyIndexをインクリメントしました（画像の最大数を超えた場合は1に設定し、次の画像を表示するよう設定します）。 mark.hch @からhttps://jsfiddle.net/cchvncnd/

Answer 2

グレート答え：ここで

は作業フィドル（まあ、ある意味で働いて、画像がすべて壊れていますが、スクリプトは動作します）です。 しかし、現在のクラスにスティックしたい場合。そして、あなたは `html`、`質問でjavascript`テキストを含めることができ、それを確認してください

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>