JavaScript слайдшоу своими руками

Недавно мне потребовалось для одного сайта создать слайдшоу на JavaScript, но сделать его похожим на другое, сделанное во Flash. Переход между фотографиями - простой фейдаут и во флеше это делается за 5 минут, а вот с яваскриптом это немного более проблематично - тем более, что нужно было это сделать кроссбраузерно. Вначале поискал в Гугле и нашел немало красивых фотогалерей и слайдшоу, но все это было не то - то слишком наворочено, то нужно все время кликать для перехода к следующей фотографии; было также одно слайдшоу, которое вроде и делало все так как надо и работало отлично, но использовало jQuery но как-то было не совместимо с той версией jQuery, которая установлена в Wordpress 5.2, на котором был сделано тот сайт, а переустановка jQuery тоже не решала проблемы, так как с новой версией переставал работать LightBox. В довершение ко всему обнаружил, что судя по описанию внутри файлов этих двух версий jQuery, они имеют один номер сборки... хотя размеры файлов отличаются почти в два раза. Из этого я сделал вывод, что, видимо, разработчики Wordpress изменили код jQuery, забыв указать это где-либо.

Но что-то я отвлекся....

Столкнувшись с такой вот загвоздочкой, я решил, что напишу такое слайдшоу сам. И спустя пару часов пыхтения над яваскриптом - добился желаемого эфекта. РЕЗУЛЬТАТ МОЖНО ВИДЕТЬ ОДНОВРЕМЕННО НИЖЕ И СПРАВА ВВЕРХУ

Кстати, размеры этих рисунков я менял с помощью уже описанной мною программы xnView

Ниже приведу код этого слайдшоу:

<style>
  #slide-container {
     text-align:center;
     margin:20px 0px;
  }
  #slide-container #slideshow {
     width:400;
     height:300px;
     margin:auto;
     position:relative;
  }
  #slide-container #slideshow IMG {
     position:absolute;
     top:0;
     left:0;
  }
</style>

<script>
function animate(tagId,alfa,step){
 div = document.getElementById(tagId);
 var items = new Array();
 //Выбираем все рисунки слайдшоу
 for(c=i=0;i<div.childNodes.length;i++){
  if (div.childNodes[i].tagName=="IMG"){
   items[c] = div.childNodes[i];
   c++;
  }
 }
 last = items[items.length-1];
 next = items[items.length-2];
 //делаем верхний в стопке(текущий) рисунок более прозрачным
 last.style.opacity= alfa/100;
 last.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity="+alfa+")";
 last.style.filter= "alpha(opacity="+alfa+")";

 if ((alfa-step)>0){
  //если еще не достигли полной прозрачности верхнего рисунка - продолжаем анимацию
   setTimeout("animate('"+tagId+"',"+(alfa-step)+","+step+");",50);
 }else{
  //если достигли полной прозрачности верхнего рисунка
  //делаем абсолютно непрозрачным следующий рисунок
  next.style.opacity= 1;
  next.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  next.style.filter= "alpha(opacity=100)";
  // а верхний рисунок перемещаем в низ стопки
  tmp = last;
  div.removeChild(last);
  div.insertBefore(tmp,items[0]);
  tmp.style.opacity= 1;
  tmp.style.filter= "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  tmp.style.filter= "alpha(opacity=100)";

  setTimeout( "slideSwitch('"+tagId+"',1000)", 8000 );
 }
}
//эта функция делает видимым блок с рисунками для слайдшоу (изначально он невидим, чтобы избежать мерцания во время загрузки картинок) и запускает анимацию
function slideSwitch(tagId,speed){
 div = document.getElementById('slideshow');
 if (div.style.visibility!="visible"){
      div.style.visibility = "visible";
 }
 items = div.getElementsByTagName('img');
 if (items.length>0){
  animate(tagId,100,10);
 }
}
//выжидаем пару секунд, чтобы картинки успели загрузиться... можно просто поставить на onload-событие последнего из рисунков
setTimeout( "slideSwitch('slideshow',1000);",2000 );
</script>

...
...
...

<div id="slide-container">
 <div id="slideshow">
  <img src="..."/>
  <img src="..."/>
  ...
  <img src="..."/>
 </div>
</div>

Если кому-то захочется сделать слайдшоу с рисунками в виде ссылок, можно заменить в коде div.childNodes[i].tagName=="IMG" на div.childNodes[i].tagName=="A" или div.childNodes[i].tagName=="DIV" ;)

Вот, немного изменил скрипт, таким образом, что на одной странице может одновременно проигрываться несколько слайдшоу, с одинаковой или разной скоростью, например одно слайдшоу на этой странице в сайдбаре справа вверху, а другое - в тексте статьи. Нужно только указать ID родительского DIV'a.

Экспериментируйте!