stocker div et tout son contenu à l'intérieur d'un tableau

Question

J'essaie de faire un diaporama, et mon idée était de changer de diapositives toutes les 5 secondes. Pour ce faire, je veux créer des divs et les stocker dans un tableau avec tout son contenu, mais je ne suis pas sûr de savoir comment je peux le faire. Mise à jour: J'ai été capable de créer un tableau d'objets avec tous les choix de questions et de réponses, puis d'utiliser la méthode .html() pour afficher les données dans les objets.

 var questions = [ 
    { 
     quest: "Which of the following is an actual movie?", 
     answer: "A. Jaws", 
     choices: ["A. Jaws", "B. Laws", "C. Paws", "D. Claws"], 
     video: "<iframe width: 200px height: 100px src = 'https://www.youtube.com/embed/2I91DJZKRxs' allowfullscreen></iframe>" 
    }, 
    { 
     quest: "Which of the following is an actual movie?", 
     answer: "B. For a Few Dollars More", 
     choices: ["A. Gummy Bears", "B. For a Few Dollars More", "C. What?", "D. I dont care"], 
     video: "<iframe width: 200px height: 100px src= 'https://www.youtube.com/embed/M-k_BW8iLkk' allowfullscreen></iframe>" 
    }, 
    { 
     quest: "Which of the following is an actual movie?", 
     answer: "D. Pineapple Express", 
     choices: ["A. The Mining", "B. The Natrix", "C. Huh?", "D. Pineapple Express"], 
     video: "<iframe width: 200px height: 100px src='https://www.youtube.com/embed/8TUTxAK1EqQ' allowfullscreen></iframe>" 
    } 
    ] 

et j'ai pu utiliser setTimeout et appeler une fonction d'affichage j'ai fait passer les questions à l'aide de la méthode .html (données de tableau ici).

Answer 1

Je vous suggère de stocker dans arraysrc attributs (pour les images).

Voir l'exemple simple exemple sans jQuery. length de votre diaporama dépend de la taille de tableau avec src attributs (c'est très flexible). Mettez quelques styles et passer)

---

// Array with SRC attributes 
 
var slides = [ 
 
\t "http://images.all-free-download.com/images/graphicthumb/walker_lake_western_nevada_explored_516978.jpg", 
 
    "http://www.imagesfromtexas.com/images/400/Texas-Hill-Country-Waterfall-4.jpg", 
 
    "http://www.animatedimages.org/data/media/1513/animated-sea-and-ocean-image-0012.gif" 
 
] 
 

 
// Put into DOM our slides 
 
window.onload = createSlides(slides); 
 

 
var slideIndex = 0; 
 

 
// Start 
 
showSlides(); 
 

 
function createSlides(images) { 
 
\t var len = images.length; 
 
    var container = document.getElementById("slideshow-container"); 
 
    
 
    for (var i = 0; i < len; i++) { 
 
    \t var slide = document.createElement("div"); 
 
    slide.className = "mySlides"; 
 
    var image = document.createElement("img"); 
 
    image.src = images[ i ]; 
 
    slide.appendChild(image); 
 
    container.appendChild(slide); 
 
    } 
 
} 
 

 
function showSlides() { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 

 
    for (i = 0; i < slides.length; i++) { 
 
     slides[i].style.display = "none"; 
 
    } 
 
    
 
    slideIndex++; 
 
    
 
    if (slideIndex> slides.length) {slideIndex = 1} 
 
    
 
    slides[slideIndex-1].style.display = "block"; 
 
    
 
    setTimeout(showSlides, 5000); // Change image every 5 seconds 
 
}

<h2>Automatic Slideshow</h2> 
 
<p>Change image every 5 seconds:</p> 
 

 
<div id="slideshow-container" class="slideshow-container"> 
 
</div>