Question

你有一个div，里面有3张图片。

如何创建一个循环显示图像的简单幻灯片，并显示每个图像5秒钟，并在完成后返回第一个图像并继续循环。

不使用jquery或任何其他框架。

Answer 1

(function () {
    var imgs = document.getElementById('your_div').getElementsByTagName('img'),
        index = 0;
    imgs[0].style.display = 'block';
    setInterval(function () {
        imgs[index].style.display = 'none';
        index = (index + 1) % imgs.length;
        imgs[index].style.display = 'block';
    }, 5000);
}());

示例HTML：http://jsfiddle.net/Zq7KB/1/

编辑：看到上面使用.length的更优雅的例子。

Answer 2

您可以使用setInterval设置定时回调，并设置src元素的img：

window.onload = function() {
    var slides = [ "path_to_image_one",
                   "path_to_image_two",
                   "path_to_image_three" // ...
                 ],
        index = 0,
        timer = 0;

    // Show the first slide
    showNextSlide();

    // Show "next" slide every five seconds
    timer = setInterval(showNextSlide, 5000);

    // The function we call to show the "next" slide    
    function showNextSlide() {
        if (index >= slides.length) {
            index = 0;
        }
        document.getElementById('theImage').src = slides[index++];
    }
};

...图片的标记是：

<img id="theImage" src="path_to_initial_placeholder">

请注意，我已将计时器句柄存储在timer中但未使用它。这只是因为如果您需要停止幻灯片放映，可以使用它来取消计时器。

更新：刚看到你想从某个地方获取div的图像（而上面我已经提供了代码本身的路径）。足够简单，可以动态创建slides;上面的修订版，用ID“theDiv”抓取div的直接子项的图像：

window.onload = function() {
    var slides = [],
        index = 0,
        timer = 0,
        node;

    // Get the slides
    for (node = document.getElementById('theDiv').childNodes;
         node;
         node = node.nextSibling) {
        if (node.nodeType == 1 && node.tagName == "IMG") {
            slides.push(node.src);
        }
    }

    // Show the first slide
    showNextSlide();

    // Show "next" slide every five seconds
    timer = setInterval(showNextSlide, 5000);

    // The function we call to show the "next" slide    
    function showNextSlide() {
        if (index >= slides.length) {
            index = 0;
        }
        document.getElementById('theImage').src = slides[index++];
    }
};

Answer 3

嗯，你必须首先获得<div>的句柄，所以如果它有一个“id”值：

var theDiv = document.getElementById("imgContainer");

现在你只需要设置一个计时器来循环显示图像：

(function(div, sleep) {
  var idx = 0;
  var imgs = div.getElementsByTagName('img');
  function showOne() {
    for (var i = 0; i < imgs.length; ++i)
      imgs[i].style.display = 'none';
    imgs[idx].style.display = '';
    idx = (idx + 1) % imgs.length;
    setTimeout(showOne, sleep);
  }

  showOne();
})(theDiv, 5000);

Answer 4

var image = new Array('/img/1.jpg', '/img/2.jpg', '/img/3.jpg');

setTimeout("show_next()",5000);

function show_next()
{
var container = document.getElementById('image_container');
container.innerHTML = "<img src='" + image[i] + "' />";
if(i==2) { i = 1; }else { i = i + 1; }
}

Answer 5

我认为这是一个很简单的答案，但有一些错误。 setInterval而不是setTimeout并且未设置初始索引。我还修改了立即加载第一张图片。

var image = new Array('imgs/18/P1050294-XL.jpg', 'imgs/18/P1050293-XL.jpg', 'imgs/18/P1040984-XL.jpg', 'imgs/18/P1040983-XL.jpg', 'imgs/18/P1040982-XL.jpg');

var path = 'mypath';

document.getElementById('slideShow').innerHTML = "<img width='600px' src='" + path + image[0] + "' />"  // Load First image
var i = 1;  // Set counter to second image, for first use of loop

setInterval("show_next(path)",5000);

function show_next(path)
{
var container = document.getElementById('slideShow');
container.innerHTML = "<img width='600px' src='" + path + image[i] + "' />";
if(i==4) { i = 0; } else { i = i + 1; }
}

不使用jquery，如何循环浏览图像以进行简单的幻灯片放映

5 个答案: