时间戳

首页 > 解决方案 > 使用 JS 和 JQuery 制作幻灯片延迟图像循环

javascript - 使用 JS 和 JQuery 制作幻灯片延迟图像循环

问题描述

我正在尝试使用 JS 和 JQuery 创建小幻灯片。下面的代码可以工作（有点），但在显示下一张图片之前不会延迟；立即显示。在显示下一张图片之前，我试图让它延迟 5 秒。我有点新手，如果代码有问题，我深表歉意。

*网址已更改，使其更具可读性。

感谢您的帮助！

var backgroundImg = ["https://x1.jpg", "https://x2.jpg"];
var backgroundImgLength = backgroundImg.length;

var z = 0;

do {

        slideShow(backgroundImg[z]);
        z++;

}
while (z < backgroundImgLength);

function slideShow(url) {

    setTimeout(function() {
        
        $('.header-section').css('background-image', 'url(' + url + ')');

    }, 5000);        

}

标签： javascriptjquerysettimeoutslideshow

解决方案

我会尝试以这种方式使用它：

const backgroundImg = [
    "https://picsum.photos/id/237/200/300",
    "https://picsum.photos/id/239/200/300"
];
const backgroundImgLength = backgroundImg.length;

let backgroundImgIndex = 0;
let backgroundImgUrl = backgroundImg[backgroundImgIndex];

const changeImage = function() {
    $('.header-section').css('background-image', 'url(' + backgroundImgUrl + ')');
}

const getNextImgIndex = function() {
    return (backgroundImgIndex + 1 < backgroundImgLength) ? backgroundImgIndex + 1 : 0;
}

// setInterval allows us to run a function repeatedly,
// starting after the interval of time,
// then repeating continuously at that interval.
const timerId = setInterval(function() {
    backgroundImgIndex = getNextImgIndex();
    backgroundImgUrl = backgroundImg[backgroundImgIndex];
  
    changeImage();
}, 5000);

changeImage();

请看这里https://codepen.io/vyspiansky/pen/jOqqNmQ

推荐阅读