2011-01-29 2 views
0

그래서 도움이 필요합니다. 나는 작은 아이폰 사이트를 가지고 있고 같은 색깔의 무작위 바 (4 이미지)를 원한다. 그럼 어떻게해야이임의의 이미지, 2 개의 다른 divs [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가 있습니다.

답변

0

당신은 자바 스크립트를 임의 같은 페이지에있는 모든 이미지를 작업 후와 (this technique 사용)에서 색상을 선택 할 수 :

: 그런 다음과 같이 이미지의 src 속성을 확인할 수 있습니다

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

 imgs[i].src = 'Bar' + random_color + '.jpg'; 
:이 일치하는 경우
if (/^Bar([a-z]+)\.jpg/.test(imgs[i].src)) { 

, 당신의 JS가에 도착 색상과 SRC을 전환

+0

예를 들어 주시겠습니까? – user594568

0

1 단계 후, 각 색에게 번호를 지정 색을 선택하기 위해 난수를 사용하는

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

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

단계 2 색

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

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

} 
+0

오 ~ 이런 .. 여기 루프 풀기가 필요해 .. 그럴 필요 없어. (진짜로 그다지 중요하지 않아.) –

+0

필자는 필사자가 필요하다. – user594568

0

에 IMG의 SRC를 설정하는 루프를 사용하는 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> 
관련 문제