Javascript-форум - Автоматическая смена картинок через заданное время

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)

Kristobal Hunta, поставте скрипт после картинок
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Прошу прощения, учту на будущее. Так вот:

<script type="text/javascript">// <![CDATA[
 var image_count = 5; 
 var interval = 5000; 
 var time_out = 15; 
 var i = 0; 
 var timeout; 
 var opacity = 100; 

 function change_image() { 
 opacity--; 
 var j = i + 1; 
 var current_image = 'img_' + i; 
 if (i == image_count) j = 1; 
 var next_image = 'img_' + j; 
 document.getElementById(current_image).style.opacity=opacity/100; 
 document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')'; 
 document.getElementById(next_image).style.opacity= (100-opacity)/100; 
 document.getElementById(next_image).style.filter=' alpha(opacity='+(100-opacity)+')';
   timeout = setTimeout("change_image()", time_out); 
*!*
 if (opacity==1) { 
 opacity = 100; 
 clearTimeout(timeout); 
 } 
*/!*
 } 

 setInterval (function() {i++; if (i>image_count) i=1; change_image();}, interval);
 // ]]></script>

Без оператора if (подсвеченный) глюк с заминкой исчезает, но вместе с плавными переходами:) , возможно ошибка в условии?
и ХТМЛ

<div id="header"  class="div">
 <img src="2.jpg" id="img_1"  style="position:absolute; "  />
 <img src="3.jpg" id="img_2"  style="position:absolute;opacity: 0; filter: alpha(opacity=0); "  />
 <img src="4.jpg" id="img_3"  style="position:absolute; "  />
 <img src="5.jpg" id="img_4"  style="position:absolute;opacity: 0; filter: alpha(opacity=0); " />
 <img src="1.jpg" id="img_5"  style="position:absolute; "  />
</div>

Kristobal Hunta,
пауза возникает потому что первый раз смена сработает через 5 сек.
Вариант смены сразу...

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
<style type="text/css">
img{
  width: 300px;
  height: 200px;
  }
</style>
</head>

<body>
<div id="header"  class="div">
 <img src="http://wap.unsveta.com/images/2163cy320x480.jpg" id="img_1"  style="position:absolute; "  />
 <img src="http://img0.liveinternet.ru/images/attach/b/3/14/277/14277320_lotos4.jpg" id="img_2"  style="position:absolute;opacity: 0; filter: alpha(opacity=0); "  />
 <img src="http://www.corporacia.ru/_data/content/0000593/corporacia.ru.000035.jpg" id="img_3"  style="position:absolute;opacity: 0; filter: alpha(opacity=0); "  />
 <img src="http://img.galya.ru/galya.ru/Pictures2/ttp/2009/06/06/1294186.jpg" id="img_4"  style="position:absolute;opacity: 0; filter: alpha(opacity=0); " />
 <img src="http://i032.radikal.ru/0712/f1/9e278e7f8393.jpg" id="img_5"  style="position:absolute;opacity: 0; filter: alpha(opacity=0); "  />
</div>
<script type="text/javascript">
 var image_count = 5;
 var interval = 5000; //пауза
 var time_out = 15; //скорость смены картинки
 var i = 5;
 var timeout;
 var opacity = 100;
 function change_image() {
 opacity--;
 var j = i + 1;
 var current_image = 'img_' + i;
 if (i == image_count) j = 1;
 var next_image = 'img_' + j;
 document.getElementById(current_image).style.opacity=opacity/100;
 document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
 document.getElementById(next_image).style.opacity= (100-opacity)/100;
 document.getElementById(next_image).style.filter=' alpha(opacity='+(100-opacity)+')';
 timeout = setTimeout("change_image()", time_out);
if (opacity==1) {
 opacity = 100;
 clearTimeout(timeout);
i++;
if (i>image_count) i=1;
timeout = setTimeout("change_image()", interval);
 }
 }
change_image()
</script>

</body>

</html>

Огромное спасибо, теперь работает как надо!

А подскажите, пожалуйста. как сделать так, чтобы при загрузке страницы первое действие было не смена картинки, а стояло бы первое изображение , которое заданное время не менялось?

Ahterknica,
пост 23 - 47 строку заменить копией 44 и в 5 строке поставить вместо 5 - 1

спасибо. получилось)

Почему скорость смены картинки зависит от её разрешения? как можно модернизировать смену картинок, чтобы изображения на весь экран менялись достаточно быстро?

Доброго времени суток! Ув. можете подсказать как использовать этот же скрипт для 2 наборов картинок в пределах одной страницы. У меня не получилось, при разных id картинок код работает только для одного набора.Можно ли его каким-либо образом "экранировать " для работы только в пределах одного <div>-блока? Заранее благодарю!

Kristobal Hunta,
самое простое придумать всем переменным, функции и разным id своим имена.