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

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

2 个答案: