2个带图像阵列的背景图像滑块

Question

我想使用两个不同的图像滑块，它们使用不同的图像。应根据容器的类别显示图像。imgArray用于类为.secondrow1的容器，imgArray2用于类为-secondrow2的容器。不幸的是，它只显示两个容器的imgArray的图像。有人知道为什么吗？

var imgArray = [
'/wp/wp-content/uploads/2020/09/image.jpg',
'/wp/wp-content/uploads/2020/09/image2.jpg',
'/wp/wp-content/uploads/2020/09/image3.jpg',
];
var imgArray2 = [
'/wp/wp-content/uploads/2020/09/image4.jpg',
'/wp/wp-content/uploads/2020/09/image5.jpg',
'/wp/wp-content/uploads/2020/09/image6.jpg',
];
function swapImages(index, slider, imageArray) {
var nextBG = 'url(' + imageArray[index] + ') no-repeat bottom center';
jQuery(slider).fadeOut('slow', function () {
jQuery(this).css('background', nextBG).fadeIn('slow');
});
}
function bgImageSlider(slider, images) {
let index = 0;
let interval = 4000;

swapImages(index, slider, imgArray);

setInterval(function () {
index += 1;

if (images.length === index) {
index = 0;
}

swapImages(index, slider, imgArray);
}, interval); // 3 second interval
}
bgImageSlider('.second-row1', imgArray);
bgImageSlider('.second-row2', imgArray2);

Answer 1

您需要将图像数组传递给swapImages函数以及

function swapImages(index, slider, imageArray) {
var nextBG = 'url(' + imageArray[index] + ') no-repeat bottom center';
jQuery(slider).fadeOut('slow', function () {
jQuery(this).css('background', nextBG).fadeIn('slow');
});
}

和在bgImageSlider 中

swapImages(index, slider, imgArray);