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