未捕获的类型错误：无法设置未定义幻灯片的属性'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">