javascript - 显示阵列中的 6 个(不同的)图像，不显示重复项并每 x 秒重新加载一次

Question

我总共有 12 张图片。我想在任何时候最多显示 6 张不同的图像 - 不显示重复项。为此，我正在使用 jQuery。我希望图像每 5 秒更改/旋转一次。

我似乎无法让这段代码工作。有人可以告诉我哪里出错了吗？

var imagesArray = [
  imgs / Scan1.jpeg ',
  '../imgs/Scan2.jpeg',
  '../imgs/Scan3.jpeg',
  '../imgs/Scan4.jpeg',
  '../imgs/Scan5.jpeg',
  '../imgs/Scan6.jpeg',
  '../imgs/Scan7.jpeg',
  '../imgs/Scan8.jpeg',
  '../imgs/Scan9.jpeg',
  '../imgs/Scan10.jpeg',
  '../imgs/Scan11.jpeg',
  '../imgs/Scan12.jepg',
];

var usedImages = {};
var usedImagesCount = 0;

function displayImage() {
  var num = Math.floor(Math.random() * (imagesArray.length));
  if (!usedImages[num]) {
    document.canvas.src = imagesArray[num];
    usedImages[num] = true;
    usedImagesCount++;
    if (usedImagesCount === imagesArray.length) {
      usedImagesCount = 0;
      usedImages = {};
    }
  } else {
    setInterval(function() {
      $("#deluxe_img").attr("src", displayImage(););
    }, 5000);
  }
}

<div class="premium_listing_container">
  <img src="function(displayImage())" id="deluxe_img" />
  <img src="function(displayImage())" id="deluxe_img" />
  <img src="function(displayImage())" id="deluxe_img" />
  <img src="function(displayImage())" id="deluxe_img" />
  <img src="function(displayImage())" id="deluxe_img" />
  <img src="function(displayImage())" id="deluxe_img" />
</div>

Answer 1

正如 Christian Hain 在评论中指出的那样，id 应该是唯一的，而您有 6 个 img 具有相同的 id。您必须在这些情况下使用类。

如果您使用字符串 function(displayImage()) 作为属性，您的浏览器将查找名为 function(displayImage()) 的图像并且不会评估它作为 Javascript，因为它不理解它是 javascript 代码。您还需要在第一页加载时使用 javascript 行更改它们以设置初始值:

$(".deluxe_img").attr("src", displayImage());

为什么每次 !usedImages[num] 评估为 false 时都设置间隔？这将不断生成新的间隔，因此您的代码将不断运行，而不仅仅是每 5 秒一次。您需要通过查找不同的 num

来处理 !usedImages[num] 计算结果为 false 的情况

var imageIndexes = [0,1,2,3,4,5,6,7,8,9,10,11]
function displayImage() {
    var index = Math.floor(Math.random() * (imageIndexes.length));
    var num = imageIndexes[index]

    var result = imagesArray[num];
    imageIndexes.splice(index, 1)

    if (imageIndexes.length === 0) {
        imageIndexes = [0,1,2,3,4,5,6,7,8,9,10,11]
    }
    return result
}


function changeImagesSrc() {
    $(".deluxe_img").each(function () {
        $(this).attr('src',displayImage())
    })
}

$(document).ready(function () {

    changeImagesSrc()
    setInterval(function() {
        changeImagesSrc()
    }, 5000);
})