Как сделать автоматическую ротацию картинок в определенном месте страницы?

20.04.2010, 22:58. **Показов** 2935. **Ответов** 6

Author24 — интернет-сервис помощи студентам

Мне необходимо, чтобы около 30 картинок сменяли друг друга каждые 1-2 секунды, без перезагрузки страницы. То есть без повторных обращений к серверу

@palva · 20.04.2010, 23:57

Пример. Картинки из моих походов.

PHP/HTML

<HTML><BODY>
<SCRIPT>
var a = Array(new Image, new Image, new Image, new Image)
a[0].src = 'http://palva.narod.ru/oval/g55/small/dsc04484.jpg'
a[1].src = 'http://palva.narod.ru/oval/g65/small/dsc00348.jpg'
a[2].src = 'http://palva.narod.ru/oval/g64/small/p6140004.jpg'
a[3].src = 'http://palva.narod.ru/oval/g70/small/p7270013.jpg'
</SCRIPT>
<img id=im src=''>
<SCRIPT>
i = 0
function fff() {
  im.src=a[i].src
  i++;
  if(i==4) i=0;
  setTimeout('fff()', 3000)
}
fff()
</SCRIPT>
</BODY></HTML>

20.04.2010, 23:58

пока искал, уже ответили :-D

http://www.relib.com/forums/topic.asp?id=801122

21.04.2010, 14:20

Все работает и в то-же время не работает. Дело в том, что картинки с удаленного ресурса загружаются очень медленно. И броузер просто не успевает их показывать. Гораздо интереснее было бы реализовать каким-то образом загрузку картинок с сервера в массив каких-то невидимых картинок. А уж потом брать их из этого массива.
Но что-то в голову не приходит, как это реализовать?

@palva · 21.04.2010, 15:26

Я в общем-то уже сделал то, что вы сказали. Можно дополнительно вставить ожидание, пока картинки загрузятся в кэш браузера. Например, таким образом:

PHP/HTML

<HTML><BODY><SCRIPT>
var a = Array(new Image, new Image, new Image, new Image)
a[0].src = 'http://palva.narod.ru/oval/g55/small/dsc04484.jpg'
a[1].src = 'http://palva.narod.ru/oval/g65/small/dsc00348.jpg'
a[2].src = 'http://palva.narod.ru/oval/g64/small/p6140004.jpg'
a[3].src = 'http://palva.narod.ru/oval/g70/small/p7270013.jpg'
</SCRIPT>
<div id=pld><BLINK>Loading...</BLINK></div>
<SCRIPT>
var i
function fff() {
 im.src=a[i].src
 i++; if(i==4) i=0
 setTimeout('fff()', 3000)
}
function test() {
  for(i=0, b=true; i<4; i++) b = b && a[i].complete
  if(b) {
    pld.innerHTML = '<img id=im src=''>'
    i=0
    fff()
  } else {
    setTimeout('test()', 3000)
  }
}
test()
</SCRIPT>
</BODY></HTML>

Только когда картинок много и они приличные по размеру, придется долго ждать. Вы можете как-то развлечь клиента, пока картинки загружаются. Может быть, имеет смысл начать прокручивать картинки тогда, когда хотя бы одна из них загрузится, и прокручивать только те картинки, которые уже готовы. Программу конечно придется усложнить, но всё в ваших руках.

@palva · 21.04.2010, 16:02

Может быть, у меня дурная привычка использовать функцию setTimeout в ситуациях, когда удобнее setInterval Дело в том, что когда я осваивал это дело функции setInterval еще не было (а может быть ее не было в моем хелпе). Как можно организовать ожидание при помощи setInterval можно посмотреть здесь

http://www.webclass.ru/tut.php?tut=194

21.04.2010, 16:13

Спасибо. Завтра с утра попробую.

evgenybe
		1
	Как сделать автоматическую ротацию картинок в определенном месте страницы? 20.04.2010, 22:58. Показов 2935. Ответов 6 Метки нет (Все метки) Мне необходимо, чтобы около 30 картинок сменяли друг друга каждые 1-2 секунды, без перезагрузки страницы. То есть без повторных обращений к серверу

alex1
	20.04.2010, 23:58	3
	пока искал, уже ответили :-D http://www.relib.com/forums/topic.asp?id=801122

evgenybe
	21.04.2010, 14:20	4
	Все работает и в то-же время не работает. Дело в том, что картинки с удаленного ресурса загружаются очень медленно. И броузер просто не успевает их показывать. Гораздо интереснее было бы реализовать каким-то образом загрузку картинок с сервера в массив каких-то невидимых картинок. А уж потом брать их из этого массива. Но что-то в голову не приходит, как это реализовать?

@palva 4240 / 2937 / 687 Регистрация: 08.06.2007 Сообщений: 9,817 Записей в блоге: 4
	21.04.2010, 16:02	6
	Может быть, у меня дурная привычка использовать функцию setTimeout в ситуациях, когда удобнее setInterval Дело в том, что когда я осваивал это дело функции setInterval еще не было (а может быть ее не было в моем хелпе). Как можно организовать ожидание при помощи setInterval можно посмотреть здесь http://www.webclass.ru/tut.php?tut=194 0

evgenybe
	21.04.2010, 16:13	7
	Спасибо. Завтра с утра попробую.