Uncaught TypeError: Не удается установить свойство '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">