Автоматическая смена картинок через заданное время
Здравствуйте. Прошу помощи вот с какой проблемой, есть в CSS одна картинка как фон дива, и есть другая, тоже как фон другого дива. Скажите, пожалуйста, как можно сделать с помощью яваскрипт или каким-либо другими методами так, чтобы вторая картинка как бы мелькнула на первой картинке допустим на пол секунды? А после этого, чтобы этот процесс повторился.
У меня есть код:
<script language="JavaScript">
i=0;
img_a=new Array()
img_h=new Array()
img_a[0]=new Image()
img_a[1]=new Image()
img_a[2]=new Image()
img_a[3]=new Image()
img_a[4]=new Image()
img_a[5]=new Image()
img_a[6]=new Image()
img_a[7]=new Image()
img_a[8]=new Image()
img_a[9]=new Image()
img_a[10]=new Image()
img_a[11]=new Image()
img_a[12]=new Image()
img_a[13]=new Image()
img_a[14]=new Image()
img_a[15]=new Image()
img_a[16]=new Image()
img_a[17]=new Image()
img_a[18]=new Image()
img_a[19]=new Image()
img_a[20]=new Image()
img_a[21]=new Image()
img_a[22]=new Image()
img_a[23]=new Image()
img_a[24]=new Image()
img_a[25]=new Image()
img_a[26]=new Image()
img_a[27]=new Image()
img_a[28]=new Image()
img_a[0].src="1.jpg"
img_a[1].src="1.jpg"
img_a[2].src="1.jpg"
img_a[3].src="1.jpg"
img_a[4].src="1.jpg"
img_a[5].src="1.jpg"
img_a[6].src="1.jpg"
img_a[7].src="1.jpg"
img_a[8].src="1.jpg"
img_a[9].src="1.jpg"
img_a[10].src="1.jpg"
img_a[11].src="1.jpg"
img_a[12].src="1.jpg"
img_a[13].src="1.jpg"
img_a[14].src="1.jpg"
img_a[15].src="1.jpg"
img_a[16].src="1.jpg"
img_a[17].src="1.jpg"
img_a[18].src="1.jpg"
img_a[19].src="1.jpg"
img_a[20].src="1.jpg"
img_a[21].src="1.jpg"
img_a[22].src="1.jpg"
img_a[23].src="1.jpg"
img_a[24].src="1.jpg"
img_a[25].src="1.jpg"
img_a[26].src="1.jpg"
img_a[27].src="1.jpg"
img_a[28].src="2.jpg"
function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function img_b()
{
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
i++
if(i>28) i=0;
setTimeout("img_b()", getRandomInt(1000, 10000))
}
</script>
<body onLoad=img_b()>
<img src="1.jpg"><br>
</body>
Он работает так как нужно, но код очень грубый и было бы отлично, если бы вы смогли оптимизировать его и соответственно переделать по дивы. Тому, кто поможет, буду ОЧЕНЬ благодарен. |