如何解决使用JS和JQuery进行幻灯片放映延迟图像循环
我正在尝试使用JS和JQuery创建一些幻灯片。下面的代码有效(某种程度上),但是在显示下一张图像之前不会延迟;马上显示出来。我试图让它延迟5秒再显示下一张图片。我有点新手,如果代码不可靠,请您道歉。
*更改了URL使其更具可读性。
感谢您的帮助!
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);
}
解决方法
我会尝试以这种方式使用它:
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();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。