Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Автоматическая смена картинок через заданное время (https://javascript.ru/forum/dom-window/10822-avtomaticheskaya-smena-kartinok-cherez-zadannoe-vremya.html)

herotic 22.07.2010 13:48

Автоматическая смена картинок через заданное время
 
Здравствуйте. Прошу помощи вот с какой проблемой, есть в 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>


Он работает так как нужно, но код очень грубый и было бы отлично, если бы вы смогли оптимизировать его и соответственно переделать по дивы. Тому, кто поможет, буду ОЧЕНЬ благодарен.

Vulkan 22.07.2010 14:02

Работу кода не стал просматривать подробнее, просто сделал с циклами.
<script language="JavaScript"> 
b=0;
img_a=new Array() 
img_h=new Array() 

for(j=0; j>28; j++){
img_a[i]=new Image();
if(j<=27){
img_a[i].src="1.jpg";} else {img_a[i].src="2.jpg";}}

function getRandomInt(min, max) { 
  return Math.floor(Math.random() * (max - min + 1)) + min;} 

function img_b() { 
for(i=0; i>28; i++){
document.images[0].src=img_a[i].src}
b++;
if(b>28) b=0;
setTimeout("img_b()", getRandomInt(1000, 10000)) }
</script>


<body onLoad=img_b()> 
<img src="1.jpg"><br> 
</body>

herotic 22.07.2010 14:21

Что-то оно не хочет работать :(

Попробовал сделать так, но ничего не получилось:
<script language="JavaScript">
	b=0;
	img_a=new Array()
	img_h=new Array()
	 
	for(i=0; i>7; i++){
	img_a[i]=new Image();
	img_a[i].src="1.jpg";
	}
	img_a[8]=new Image();
	img_a[8].src="2.jpg";
	 
	function getRandomInt(min, max) {
	  return Math.floor(Math.random() * (max - min + 1)) + min;}
	 
	function img_b() {
for(j=0; j>8; j++){
	document.images[0].src=img_a[i].src}
	b++;
	if(b>8) b=0;
	setTimeout("img_b()", getRandomInt(100, 110)) }
	</script>

Sweet 22.07.2010 15:00

herotic, ник у вас что надо: полностью соответствует действительности:) Код - ересь полнейшая! Но главное, что я лично не понял, нафига весь этот код:) Почему нельзя просто через
setTimeout(function(){ div.style.background = "url('...')" }, 1000)

???

herotic 22.07.2010 15:09

Цитата:

Сообщение от Sweet (Сообщение 64805)
herotic, ник у вас что надо: полностью соответствует действительности:) Код - ересь полнейшая! Но главное, что я лично не понял, нафига весь этот код:) Почему нельзя просто через
setTimeout(function(){ div.style.background = "url('...')" }, 1000)

???

А как тогда Вашим кодом сделать например так:
Есть первый див с фоновым рисунком.
Есть второй див с фоновым рисунком.
Через определенное время,к примеру 10 сек, фоновый рисунок первого дива меняется на второй, допустим на 1 сек, после чего возвращается первый рисунок и все опять повторяется? :)

Sweet 22.07.2010 15:45

Например, так:
var url1 = '...', url2 = '...', 
div1 = document.getElementById('div1'), div2 = document.getElementById('div2')
setInterval( function(){
  div1.style.background = "url('"+url2+"')"
  setTimeout( function(){
    div1.style.background = "url('"+url1+"')"
  }, 1000)
}, 11000)

Sweet 22.07.2010 16:05

Кстати, повникал в первоначальный код.. Это пздц!!! Ничего глупее я бы не смог придумать даже если бы мне дали стоПицот тыщ денег за самый глупый код.. Может программирование - не ваше???

Vulkan 22.07.2010 16:12

Sweet, может человек нашёл код на просторах интернета:)

herotic 22.07.2010 16:17

Цитата:

Сообщение от Sweet (Сообщение 64814)
Например, так:
var url1 = '...', url2 = '...', 
div1 = document.getElementById('div1'), div2 = document.getElementById('div2')
setInterval( function(){
  div1.style.background = "url('"+url2+"')"
  setTimeout( function(){
    div1.style.background = "url('"+url1+"')"
  }, 1000)
}, 11000)

То ли я его как-то неправильно заюзал, то ли он не рабочий. Если он работает, скажите, пожалуйста, как его правильно привязать к хтмлу?

Цитата:

Сообщение от Sweet (Сообщение 64818)
Кстати, повникал в первоначальный код.. Это пздц!!! Ничего глупее я бы не смог придумать даже если бы мне дали стоПицот тыщ денег за самый глупый код.. Может программирование - не ваше???

Я просто реализовал то, что мне было нужно кодом, который нашел в интернете, изначально он просто показывал картинки с интервалом в 1 секунду. Буду учиться правильным стилем программировать :)

Vulkan 22.07.2010 16:19

Цитата:

Сообщение от herotic (Сообщение 64820)
То ли я его как-то неправильно заюзал, то ли он не рабочий. Если он работает, скажите, пожалуйста, как его правильно привязать к хтмлу?

Вы в переменные url1 и url2 свои данные подставили?:)


Часовой пояс GMT +3, время: 08:04.