Показ картинок поочереди с задержкой

QAZ · 18 дек 2004, 16:58

Здравствуйте, All!

Как организовать на JavaScript следующий код? Нужно, чтобы три картинки одного размера поочереди отображались на странице с задержкой 3 секунды.

Видимо, нужно создать пять слоев для каждой картинки и активировать каждые три секунды свой слой. Я правильно понимаю или есть другой вариант? Как это оформить на JavaScript?

Попробовал сделать примерно следующее:

Код: Выделить всё

<script language="JavaScript">
<!--

images = new Array(3);
images[0]="kartinka_1.gif";
images[1]="kartinka_2.gif";
images[2]="kartinka_3.gif";

var num=0;

function Figure() { 
     this.moveDown = tFigureMoveDown;
}

function next() { 
     document.write("[img]"+images[num]+"[/img]
");
     num++;
     if (num==3) { num=0; }
}

function tFigureMoveDown() {
     next();
     window.setTimeout(tFigureMoveDown, 3000);
}

var figa = new Figure();
figa.moveDown();

//-->
</script>

В результате сначала выводится первая картинка, через три секунды
вторая картинка, а третья вообще не выводится. Цель была такая, чтобы
вообще зациклить: выводим картинку 1, через три секунды 2, через три
секунды 3, через три секунды 1, через три секунды 2 и т.д.

В чем ошибка? Что не так?

Заранее благодарю за помощь!

chur · 19 дек 2004, 10:58

Примерно так.

Код: Выделить всё

<script language="JavaScript"> 
  k=0; picscount=3;
  images = new Array(3);
  images[0]="kartinka_1.gif";
  images[1]="kartinka_2.gif";
  images[2]="kartinka_3.gif";
  change_image();

  function change_image() {
    if (k<(picscount-1)) k=k+1;
    else k=0;
    document.all.image_1.src=images[k].src;
    window.setTimeout("change_image()", 3000);
  }

</script>

Ну и на страничке, должен быть тег <IMG id=image_1>.

QAZ · 19 дек 2004, 18:29

Записал код в следующем виде:

Код: Выделить всё

<html>
<head>
</head>
<body>

<script language="JavaScript"> 
  k=0; picscount=3; 
  images = new Array(3); 
  images[0]="image_1.gif"; 
  images[1]="image_2.gif"; 
  images[2]="image_3.gif"; 
  change_image(); 

  function change_image() { 
    if (k<(picscount-1)) k=k+1; 
    else k=0; 
    document.all.image_1.src=images[k].src; 
    window.setTimeout("change_image()", 3000); 
  } 

</script>

[img]image_1.gif[/img]

</body>
</html>

Но пишет "Выполнено, но с ошибками на странице." и естественно не запускается...

Вроде же все правильно?!

chur · 19 дек 2004, 19:03

Скрипт выполняется раньше, чем появляется нужный тег <IMG>, поэтому он его не находит. И картинки надо чуть по-другому подгружать :) Давно баловался, забыл уже.

Код: Выделить всё

<html>
<head>
</head>
<body>

[img]image_1.gif[/img]

<script language="JavaScript">
  var k=0; var picscount=3;
  var myimg = document.getElementById("image_1");
  var images = new Array(3);
  images[0]=new Image();
  images[0].src="image_1.gif";
  images[1]=new Image();
  images[1].src="image_2.gif";
  images[2]=new Image();
  images[2].src="image_3.gif";
  change_image();


  function change_image() {
    if (k<(picscount-1)) k=k+1;
    else k=0;
    myimg.src=images[k].src;
    window.setTimeout("change_image()", 3000);
  }

</script>
</body>
</html>

QAZ · 19 дек 2004, 19:21

chur, спасибо огромное! Все работает! :lol: