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

这是一段简化的代码，您可以运行并查看它的工作原理

＆＃13;

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)

＆＃13;

<img id="slideshow">

＆＃13;

在原始代码中，您正在预加载图像。我在下面做了一个小改编，在初始化滑块之前先预先加载图像。

＆＃13;

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)
})

＆＃13;

<img id="slideshow">

＆＃13;

未捕获的TypeError：无法设置未定义幻灯片的属性'src'

1 个答案: