Question

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

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

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

我正在努力弄清楚如何使用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="https://www.hdmegawallpaper.com/wp-content/uploads/2016/05/image_20160511_005430_3370.jpg" style="width:150px;">
<img id="thumb__cover" src="https://www.hdmegawallpaper.com/wp-content/uploads/2016/05/image_20160511_005430_3372.jpg" style="width:150px;">
<img id="thumb__cover" src="https://www.hdmegawallpaper.com/wp-content/uploads/2016/05/image_20160511_005430_3373.jpg" style="width:150px;">
<img id="thumb__cover" src="https://www.hdmegawallpaper.com/wp-content/uploads/2016/05/fathers-day-wallpaper-1.jpg" style="width:150px;">

Answer 1

扩展上面的答案：

在HTML中，每个页面的id标记应该是唯一的。当您在javascript中通过id引用某些内容时，它只希望查找具有该id的一个元素。因此，当您使用javascript对该id执行某些操作时，它只会将其用于在DOM中找到的具有该ID的第一个元素。

var image = document.getElementById('thumb__cover');

这只会获得带有该ID的第一张图片。如果只有一个，它可以正常工作，但是如果有多个，那么它只会执行一次其余的代码。

您要使用的是document.getElementByClassName()

需要关于随机图像旋转的指南？

1 个答案: