未捕獲的類型錯誤：無法設置未定義幻燈片的屬性'src'

Question

我在獲取此幻燈片的過程中遇到了很多麻煩。我必須製作一個外部的Javascript文件。我很困惑，因爲我根本不瞭解js。任何幫助將不勝感激。

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

除非在某個地方，在你的HTML ...

<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">