如何使用javascript / jquery同时显示多个图像序列？

Question

我正在尝试使用javascript播放多个图像序列。 问题是我需要为每个问题（例如20个问题）显示一系列图像。

现在，使用我的代码，我一次只能显示一个动画，并且需要同时显示所有动画。

这是我的代码的小提琴： 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/ （这是我想要实现的目标） 。 但是，问题是，先验地，我不知道我的测验将要遇到的问题数量，并且我不想像示例一样重复代码。

解：

感谢Sinan 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); 

}

这是一个工作的jsFiddle

Answer 1

您可以将问题包装在<div>标记中，将变化的数字包装成一个循环，遍历问题类：

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