Uncaught TypeError：未定義のスライドショーのプロパティ 'src'を設定できません

Question

このスライドショーを動作させるには、多くの問題があります。私は外部のJavascriptファイルを作成する必要があります。私は非常によくjを知らないので、私は非常に混乱しています。どんな助けもありがとう。あなたのHTML内でこのどこかでない限り

var numImages = 3; 
 
var images = []; 
 
for (var i = 0; i < numImages; ++i) { 
 
    var image = new Image(); 
 
    image.src = 'baby' + (i + 1) + '.jpg'; 
 
    images.push(image); 
 
} 
 

 
var step = 0; 
 
function slideit() { 
 
    if (! document.images) { 
 
     return; 
 
    } 
 
    document.images.slide.src = images[step].src; 
 
    step = (step + 1) % numImages; 
 
} 
 
setInterval(slideit, 2500);

Answer 1

...

<img id="slide"> 

次に、この

...したがって undefined ...

document.images.slide 

あるだろう

document.images.slide.src = ... 

はここ

Uncaught TypeError: Cannot set property 'src' of undefined 

---

はそれが仕事あなたが実行して見ることができるコードの単純化した作品だ...説明

var images = [ 
 
    'http://placehold.it/200?text=A', 
 
    'http://placehold.it/200?text=B', 
 
    'http://placehold.it/200?text=C' 
 
] 
 

 
function slideIt(elem, i, images) { 
 
    elem.src = images[i % images.length] 
 
    setTimeout(slideIt, 1000, elem, i+1, images) 
 
} 
 

 
slideIt(document.querySelector('#slideshow'), 0, images)

<img id="slideshow">

---

元のコードでは、画像をプリロードしていました。私はスライダを初期化する前にまず画像をプリロードするために、以下の小さな適応を行いました。

var images = [ 
 
    'http://placehold.it/200?text=A', 
 
    'http://placehold.it/200?text=B', 
 
    'http://placehold.it/200?text=C' 
 
] 
 

 
function slideIt(elem, i, images) { 
 
    elem.src = images[i % images.length].src 
 
    setTimeout(slideIt, 1000, elem, i+1, images) 
 
} 
 

 
function imagep(src) { 
 
    return new Promise(function(pass,fail) { 
 
    var i = new Image() 
 
    i.src = src 
 
    i.onload = function(event) { pass(i) } 
 
    }) 
 
} 
 

 
Promise.all(images.map(imagep)).then(function(imgs) { 
 
    slideIt(document.querySelector('#slideshow'), 0, imgs) 
 
})

<img id="slideshow">