Пытаюсь перебрать массив изображений, но код отображает только число 1 (даже не число 0)
Я пытаюсь просмотреть массив изображений, но код отображает только 1 изображение из массива.
Кроме того, чтобы еще больше запутать, отображается даже не элемент 0 массива, а элемент 1.
Я читал о setTimeOut и других методах, но пока не понимаю логики (новичок в javascript).
Моя конечная цель - отобразить серию изображений в течение определенного периода времени (например, фотограммы на видео), когда мышь находится над выбранным элементом.
вот мой код:
let aboutMePics = ["url('./img/aboutMeStill01.png')", "url('./img/aboutMeStill02.png')"]
const aboutMe = document.getElementById("aboutMe")
aboutMe.addEventListener("mouseover", function(){
for (let i = 0; i < aboutMePics.length; i++) {
document.body.style.background = aboutMePics[i];
}
})
aboutMe.addEventListener("mouseout", function(){
document.body.style.background = 'initial';
})
Это плохо? Это именно то, что я хочу сделать.
Ваш вопрос говорит о том, что вы хотите показать несколько изображений. Замена одного изображения и одновременное отображение нескольких изображений — две совершенно разные вещи.
@Taplar "Моя конечная цель - отобразить серию изображений в течение определенного периода времени (например, фотограммы на видео)..."
Итак, цель состоит в том, чтобы сделать псевдослайд-шоу.
Просто чтобы быть ясным, я хочу отображать только одно изображение за раз, поэтому код действительно заменит отображаемое изображение.
Да, именно, как псевдо слайд-шоу
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
// IIFE just for a reduced scope
(function() {
const aboutMePics = ["url('./img/aboutMeStill01.png')", "url('./img/aboutMeStill02.png')"];
const aboutMe = document.getElementById("aboutMe");
let timeout;
function adjustPicture(index) {
document.body.style.background = aboutMePics[index];
timeout = setTimeout(() => adjustPicture(++index % aboutMePics.length), 3000);
}
aboutMe.addEventListener('mouseenter', function(){
adjustPicture(0);
});
aboutMe.addEventListener("mouseleave", function() {
clearTimeout(timeout);
document.body.style.background = 'initial';
});
})();
- Когда мышь входит в элемент, настройте изображение на рис. 0.
- После настройки изображения запустите тайм-аут для следующего изображения на 3 секунды.
- Модуль индекса по количеству изображений, поэтому циклы индекса
- Когда мышь покидает элемент, очищайте тайм-аут и сбрасывайте фон
Вы заменяете фон стиля тела с каждой итерацией.