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

我想使用两个不同的图像滑块,使用不同的图像。图像应该根据容器的类来显示。包含类.second-row1的容器的imgArray和包含类.second-row2的容器的imgArray2。不幸的是,它只显示了两个容器的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);

转载请注明出处:http://www.4008202667.com/article/20230328/1118796.html