Amonshy Amonshy - 4 months ago 14
HTML Question

How do I show a multiple sequence of images at the same time using javascript/jquery?

I am trying to play multiple sequence of images using javascript. The problem is that I need to show for each question(for example, 20 questions) a sequence of images.

Right now, with my code, I can only show one animation per time, and I need to show all the animations at same time.

Here is a fiddle with my code: 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>


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


I know that if I set a different class for each question, I can show each animation at the same time, example: https://jsfiddle.net/Amonshy/mrjckfoe/14/ (this is what I'm trying to achieve).
However, the problem is that, a priori, I don't know the numbers of questions my quiz is going to have and I don't want to duplicate code like the example.

Answer

You could wrap the questions in <div> tags, wrap the number changing in a loop, that iterates though the the question classes:

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

Wrap the questions in classes:

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

Here is a working jsFiddle.

Comments