不用jquery，如何循环使用图像来制作简单的幻灯片

You have a div, with 3 images in it.

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

How to create a simple slideshow that cycles through the images, and displays each image for 5 seconds and goes back to the first image when done and continues looping.

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

Without using jquery or any other framework.

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

5 个解决方案

#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);
}());

Example HTML: http://jsfiddle.net/Zq7KB/1/

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

Edit: Saw a more elegant example above that used .length.

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

#2

You can use setInterval to set up the timed callback, and set the src of an img element:

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

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++];
    }
};

...where your markup for the image is:

…图像的标记为:

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

Note that I've stored the timer handle in timer but not used it. This is just because you might use it to cancel the timer if you need to stop the slideshow.

注意，我在计时器中存储了计时器句柄，但没有使用它。这只是因为如果需要停止幻灯片，可以使用它来取消计时器。

Update: Just saw that you want to get the images from a div somewhere (whereas above I've supplied the paths in the code itself). Simple enough to create slides dynamically; revised edition of the above that grabs the images that are direct children of the div with the ID "theDiv":

更新:看到您想从某个div获取图像(而上面我提供了代码本身的路径)。简单到可以动态创建幻灯片;上面的修订版以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++];
    }
};

#3

Well you'd have to get a handle for the <div> first, so if it has an "id" value:

你必须先得到

的句柄，如果它有一个“id”值:

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

Now you just have to set up a timer to cycle through the images:

现在你只需要设置一个定时器来循环这些图像:

(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);

#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; }
}

#5

I thought this was a nice simple answer, but there were a couple of errors. setInterval rather than setTimeout and the initial index was not set. I also amended to load first image immediately.

我认为这是一个很简单的答案，但是有几个错误。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; }
}