javascript - Javascript定时幻灯片至少不起作用

Question

这很令人难过。一些背景知识，我是 Javascript 的新手，这是我在生活中的第一个应用程序，因为在两天内完成了一半的 Javascript 教科书。这是一个链接到我的 HTML 末尾的外部文件。如果需要更多，请询问，我会尽力提供。

var slide = document.getElementById("slide");

setInterval(slideshow.changeSrc, 5000);

var slideshow = {
    changeSrc : function() {    
        if(slide.src === "./images/s1.png"){
            slide.src = "./images/s2.png";
        }
        else if(slide.src === "./images/s2.png"){
            slide.src = "./images/s3.png";
        }
        else{
            slide.src = "./images/s1.png";
        }
    }
}
slide.addEventListener("load", slideshow.changeSrc, false);

Answer 1

我认为这就是您要实现的目标：

var slide = document.getElementById("slide");
var slideshow = {
    changeSrc : function() {    
        setTimeout(function() {
            slide.src = 'http://lorempixel.com/100/100';
        }, 1000);
    }
}
slide.addEventListener("load", slideshow.changeSrc, false);

http://jsfiddle.net/Bs4gM/

Answer 2

该src属性是浏览器解析您提供给它的 URL 的结果。不要将其用于比较。此外，只有窗口和某些元素（如图像或脚本）具有load事件。尝试这个：

相反，为什么不只跟踪索引呢？

(function() {
  var id = 0, slide = document.getElementById('slide');
  setInterval(function() {
    id++;
    slide.src = "images/s"+id+".png";
    id %= 3;
  },5000);
})();