需要有关随机图像旋转的指导？

我在努力研究如何使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;">

来源

2016-05-12 admmin

嗯，首先，你可能想改变，从'ID = “thumb__cover”''到类= “thumb__cover”'。如果你试着给出所有相同的ID，你将得到你已经看到的行为（只有第一个会做任何事情）。 –

为了扩大对我的回答以上：

在HTML中，ID标记应该是每页唯一的。当你在javascript中通过id引用某个东西时，它只希望查找具有该id的一个元素。所以，当你使用javascript来做某些事情时，它只会把它用到DOM中找到的那个id中的第一个元素。

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

这仅与ID获取的第一张图像。如果只有一个，它可以正常工作，但如果有多个，它只会执行其余的代码。

要使用什么是document.getElementByClassName()

来源

2016-05-12 14:17:40

需要有关随机图像旋转的指导？

回答

相关问题