未捕获的类型错误:无法设置未定义的幻灯片的属性“src”

Uncaught TypeError: Cannot set property 'src' of undefined slideshow

本文关键字：幻灯片 未定义 属性 src 设置 类型 错误      更新时间：2023-09-26

我在让这个幻灯片工作时遇到了很多麻烦。我必须制作一个外部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);

除非这在你的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">

相关文章：