ランダムな画像回転の複数のインスタンス

Question

id = "cover__thumb"の画像のすべてのインスタンスを、あらかじめ定義された画像を通してランダムに回転させる方法を考えるのは、苦労しています。

現在、最初のid = "cover__thumbs"のみが回転しますが、同じIDを持つ他の画像には影響しません。

必ずしも4枚の画像があるとは限りません。このIDを持つすべての画像に対応するソリューションはありますか？

フィドル

https://jsfiddle.net/bpLdkhg0/

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