javascript/jqueryを使用して複数の画像を同時に表示するにはどうすればよいですか？

Question

JavaScriptを使用して複数の画像シーケンスを再生しようとしています。問題は、各質問（たとえば20問）ごとに一連の画像を表示する必要があることです。

私のコードでは、時間ごとに1つのアニメーションしか表示できず、同時にすべてのアニメーションを表示する必要があります。ここで

は私のコードとフィドルです：https://jsfiddle.net/Amonshy/mrjckfoe/6/

<hr> 
<p>Question 1. </p> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/8iznatxr3/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/g08uq1na7/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/hgkd86q73/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/5fyx7gisf/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/3pfw5z19b/image.png" style="display:none;"> 
<hr> 
<p>Question 2. </p> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/8iznatxr3/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/g08uq1na7/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/hgkd86q73/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/5fyx7gisf/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/3pfw5z19b/image.png" style="display:none;"> 
<hr> 
<p>Question 3. </p> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/8iznatxr3/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/g08uq1na7/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/hgkd86q73/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/5fyx7gisf/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/3pfw5z19b/image.png" style="display:none;"> 
<hr> 
<p>Question 4. </p> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/8iznatxr3/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/g08uq1na7/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/hgkd86q73/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/5fyx7gisf/image.png" style="display:none;"> 
<img class="mySlides img-thumbnail" src="http://s11.postimg.org/3pfw5z19b/image.png" style="display:none;"> 
<hr> 

そして、私のjavascript：

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, 1500); 
    } 

私はそれぞれの質問に対して、異なるクラスを設定した場合、私が各アニメーションを表示することができます知っています同じ時間、例：https://jsfiddle.net/Amonshy/mrjckfoe/14/（これは私が達成しようとしているものです）。 しかし問題は、先験的に、私のクイズが持つ予定の数がわからず、例のようにコードを複製したくないということです。

ソリューション：シナンGucluに

おかげで解決策を支援します。ここに私の提案ソリューションと私のjavascriptです：

var ary = new Uint8Array(50); 
carousel(); 

function carousel() { 
    // Gets the question elements 
    var questions = document.getElementsByClassName('question'); 

    for (var x = 0; x < questions.length; x++){ 
    var question = questions[x]; 
    // Gets the images within the questions 
    var images = question.getElementsByClassName("mySlides"); 
    for (var i = 0; i < images.length; i++) { 
     if(ary[x] < question.getElementsByClassName("mySlides").length) 
     { 
      images[i].style.display = "none"; 
     } 
     else 
     { 
      ary[x]=0; 
     } 
    } 
     if(ary[x] < question.getElementsByClassName("mySlides").length) 
     { 
     images[ary[x]].style.display = "block"; 
     ary[x] = ary[x] + 1; 
     } 
     else{ 
     ary[x] = 0; 
     } 
    } 
    setTimeout(carousel, 1500); 

}ここで

はされますが、しかし反復処理し、<div>タグで質問をラップループに変更番号をラップする、ということができjsFiddle

Answer 1

作業質問クラス：クラスで

var myIndex = 0; 
carousel(); 

function carousel() { 
     // Gets the question elements 
     var questions = document.getElementsByClassName('question'); 
     var imageQty = questions[0].getElementsByClassName("mySlides").length; 

     for (var x = 0; x < questions.length; x++){ 
     var question = questions[x]; 
     // Gets the images within the questions 
     var images = question.getElementsByClassName("mySlides"); 
     for (var i = 0; i < images.length; i++) { 
      images[i].style.display = "none"; 
     } 

     images[myIndex].style.display = "block"; 
     } 
     myIndex ++; 
     if (myIndex > imageQty-1) {myIndex = 0} 
     setTimeout(carousel, 1500); 
} 

ラップ質問：

<div class="question"> 
    <p>Question 3. </p> 
    <img class="mySlides img-thumbnail" src="http://s11.postimg.org/8iznatxr3/image.png" style="display:none;"> 
    <img class="mySlides img-thumbnail" src="http://s11.postimg.org/g08uq1na7/image.png" style="display:none;"> 
    <img class="mySlides img-thumbnail" src="http://s11.postimg.org/hgkd86q73/image.png" style="display:none;"> 
    <img class="mySlides img-thumbnail" src="http://s11.postimg.org/5fyx7gisf/image.png" style="display:none;"> 
    <img class="mySlides img-thumbnail" src="http://s11.postimg.org/3pfw5z19b/image.png" style="display:none;"> 
    <hr> 
</div> 

ここには、作業jsFiddleがあります。

Answer 2

これを試してみてください、それは前の回答を補完し、あなたの質問のためのより適切である：

var myIndex = 0; 
var ary = new Uint8Array(50); 
carousel(); 

function carousel() { 
    // Gets the question elements 
    var questions = document.getElementsByClassName('question'); 

    for (var x = 0; x < questions.length; x++){ 
    var question = questions[x]; 
    // Gets the images within the questions 
    var images = question.getElementsByClassName("mySlides"); 
    for (var i = 0; i < images.length; i++) { 
     if(ary[x] < question.getElementsByClassName("mySlides").length){ 
      images[i].style.display = "none"; 
     }else{ 
      ary[x]=0; 
     } 
    } 
     if(myIndex < question.getElementsByClassName("mySlides").length){ 
     images[ary[x]].style.display = "block"; 
     ary[x] = ary[x] + 1; 
     }else{ 
     ary[x] = 0; 
     } 
    } 
    setTimeout(carousel, 1500); 
}