隨機圖片，2個不同的div [HTML，JavaScript]

所以我需要一些幫助。我有一個小型的iPhone網站，我希望酒吧（4張圖片）以相同的顏色隨機選擇。（如主題）隨機圖片，2個不同的div [HTML，JavaScript]

所以這樣

Barred1.jpg , Barred2.jpg , Barred3.jpg Barred4.jpg 
Barblue1.jpg , Barblue2.jpg , Barblue3.jpg Barblue4.jpg 
Barpink1.jpg , Barpink.jpg , Barpink3.jpg Barpink4.jpg 
Bargreen1.jpg , Bargreen2.jpg , Bargreen3.jpg Bargreen4.jpg

怎麼辦呢？

所有的酒吧都在不同的div ..

我爲我的英語不好對不起。

來源

2011-01-29 user594568

你可以有JavaScript的隨機選擇（使用this technique），然後通過這樣的網頁上的所有圖像的工作色彩：

var imgs = document.getElementsByTagName('img'), 
i = imgs.length; 
while (i) { 
    i -= 1;

然後，你可以查看圖像的src屬性，像這樣：

if (/^Bar([a-z]+)\.jpg/.test(imgs[i].src)) {

如果匹配，只是切換出SRC與JS到達顏色：

 imgs[i].src = 'Bar' + random_color + '.jpg';

來源

2011-01-29 00:11:24 sdleihssirhc

你能舉個例子嗎？ – user594568 2011-01-29 00:52:51

步驟1是將每個顏色分配一個號碼，然後使用隨機數選擇一個顏色

var colors = new Array("red","blue","pink","green"); 

var random = Math.floor(Math.random()*4);

步驟2是使用一個for循環到IMG SRC設置爲顏色

for (var i=1; i < 5; i++){ 

document.getElementById("img"+i).src = "Bar"+colors[random]+i+".jpg"; 

}

來源

2011-01-29 00:14:33 WebChemist

哎喲..需要一些循環展開在這裏..沒有必要它（不是它真的很重要所有tho;）） – 2011-01-29 00:23:34

使用jquery：

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script> 

var a = ['red', 'blue', 'pink', 'green']; 

function setBarTheme(bar, idx) 
{ 
$(bar).css('background-image', 'url(Bar' + a[idx] + '.jpg)'); 
} 

$(document).ready(function(){ 

var r = Math.floor(Math.random()*4); 

setBarTheme('#bar1', r); 
setBarTheme('#bar2', r); 
setBarTheme('#bar3', r); 
setBarTheme('#bar4', r); 

}); 


</script> 
</head> 
<body> 

<div id="bar1"></div> 
<div id="bar2"></div> 
<div id="bar3"></div> 
<div id="bar4"></div> 

</body> 
</html>

來源

2011-01-29 00:22:22

隨機圖片，2個不同的div [HTML，JavaScript]

回答

相關問題