將div及其所有內容存儲在數組中

Question

我正在嘗試進行幻燈片放映，並且我的想法是每隔5秒後切換幻燈片。要做到這一點，我想創建div並將它們存儲在一個包含所有內容的數組中，但我不知道如何做到這一點。

更新：我能夠創建一個包含所有問題和答案選項的對象數組，然後使用.html（）方法在對象中顯示數據。

 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>" 
    } 
    ] 

，然後我能夠使用setTimeout和調用我提出來切換使用。html的問題（陣列數據在這裏）方法的顯示功能。

Answer 1

我建議你存儲到arraysrc屬性（圖片）。

查看簡單示例沒有jQuery。您的幻燈片的length取決於具有src屬性的陣列的大小（它非常靈活的）。 把一些風格，繼續前進）

---

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