javascript - Javascriptのタイミングスライドショーが少なくとも機能しない

Question

そしてそれは悲しいことです。いくつかの背景として、私はJavascriptを初めて使用します。これは、人生で初めてのアプリケーションであり、2日間で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);
})();