Question

我正在努力弄清楚如何使用id =“cover__thumb”的所有图像实例在预定义图像中随机旋转。

目前只有第一个id =“cover__thumbs”会旋转，它对具有相同ID的其他图片没有影响。

不会总是有4张图片，有时甚至更少。是否有适用于具有此ID的任何图像的解决方案？

小提琴

JS

function rotateImages()
{
    var thumbImages = new Array( );

    thumbImages[0] = "https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg";
    thumbImages[1] = "http://cdn.images.express.co.uk/img/dynamic/13/590x/magnolia-tree-630524.jpg";
    thumbImages[2] = "http://cdn.images.express.co.uk/img/dynamic/109/590x/Oak-tree-580618.jpg";

    var image = document.getElementById('thumb__cover');
    var randomImageIndex = Math.floor( Math.random( ) * thumbImages.length );
    image.src = thumbImages[randomImageIndex];
}
window.setInterval(rotateImages, 1000);

HTML

<img id="thumb__cover" src="http://pic.1fotonin.com//data/wallpapers/121/WDF_1633007.jpg" style="width:150px;">
<img id="thumb__cover" src="http://pic.1fotonin.com//data/wallpapers/121/WDF_1633007.jpg" style="width:150px;">
<img id="thumb__cover" src="http://pic.1fotonin.com//data/wallpapers/121/WDF_1633007.jpg" style="width:150px;">
<img id="thumb__cover" src="http://pic.1fotonin.com//data/wallpapers/121/WDF_1633007.jpg" style="width:150px;">

Answer 1

如果要一次选择多个DOM元素，请使用class属性：

HTML：

<img class="thumb__cover" ... />

JS：

var images = document.querySelectorAll(".thumb__cover");

或

var images = document.getElementsByClassName("thumb__cover");

现在，图片是nodeList，可以包含任意数量的元素。要为每个属性设置src属性，您必须遍历列表中的项目：

for (var i = 0; i < images.length; i += 1) {
  var image = images[i];
  var randomImageIndex = Math.floor(Math.random() * thumbImages.length);

  image.src = thumbImages[randomImageIndex];
}

有关节点列表的更多信息：https://developer.mozilla.org/en/docs/Web/API/NodeList

多个随机图像旋转实例

1 个答案: