Question

我正在尝试制作幻灯片，我的想法是每隔5秒切换一次幻灯片。要做到这一点，我想创建div并将它们存储在一个包含所有内容的数组中，但我不知道如何做到这一点。

更新：我能够创建一个包含所有问题和答案选项的对象数组，然后使用.html（）方法显示对象中的数据。

private void rtbChatWindow_TextChanged(object sender, EventArgs e)
{
    int maxLines = 200;

    if (rtbChatWindow.Lines.Length > maxLines)
    {
         string s = rtbChatWindow.Lines.First();
         rtbChatWindow.Text = rtbChatWindow.Text.Remove(0, s.Length).Trim();
    }
}

然后我能够使用setTimeout并调用我使用.html（此处的数组数据）方法切换问题的显示函数。

Answer 1

我建议您存储到array src属性（图片）。

在没有jQuery的情况下查看简单的示例。 幻灯片的length取决于具有src属性的数组的大小（非常灵活）。放一些样式并继续前进）

// Array with SRC attributes
var slides = [
	"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 ) {
	var len = images.length;
  var container = document.getElementById( "slideshow-container" );
  
  for ( var i = 0; i < len; i++ ) {
  	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>

将div及其所有内容存储在数组中

1 个答案: