Javascript 在不使用jquery的情况下，如何循环浏览图像以制作简单的幻灯片

您有一个div，其中包含3个图像

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

---

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

您必须首先获得

的句柄，因此如果它有一个“id”值：

现在，您只需设置一个计时器来循环浏览图像：

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

（功能（div，sleep）{
var-idx=0；
var imgs=div.getElementsByTagName（'img'）；
函数showOne（）{
对于（变量i=0；i

您可以使用设置定时回调，并设置

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

…其中图像的标记为：

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

var image=new数组（'/img/1.jpg'，'/img/2.jpg'，'/img/3.jpg'）；
setTimeout（“show_next（）”，5000）；
函数show_next（）
{
var container=document.getElementById（'image_container'）；
container.innerHTML=“”；
如果（i==2）{i=1；}否则{i=i+1；}
}

HTML示例：

---

编辑：在上面看到了一个使用.length的更优雅的示例

我认为这是一个简单的回答，但有几个错误。

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

var image=new数组（'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=”“//加载第一个图像
变量i=1；//将计数器设置为第二个图像，用于循环的第一次使用
设置间隔（“显示下一个（路径）”，5000；
函数show_next（路径）
{
var container=document.getElementById（'slideShow'）；
container.innerHTML=“”；
如果（i==4）{i=0；}否则{i=i+1；}
}

我可以问一下为什么您想为自己做更多的工作吗？当然，为了学习依赖jQOf，getElementsByTagName不能移植到较旧的浏览器上，这就是为什么jQuery如此流行的原因。但IE6及以上版本也不错，现在应该被评为“足够好”了。想到将IE5.5纳入新应用程序的规划中，我感到非常恐惧。我应该继续说：为这些东西使用一个库是非常值得的。我知道你说过你不想这样做，所以答案是肯定的，但是像、、或这样的图书馆可以真正地找出许多常见的东西，让你专注于你的实际目标。我在回答下面的答案，但我的回答错了——抱歉。

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

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

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

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