Плавная смена изображений на сайте

Как-то мне понадобилось на сайте техникума, где я работаю опубликовать фотографии с надписями, чтобы они листались сами, как в презентации по времени. Поискал в интернете и нашёл статью. Автору очень благодарен! Спасибо большое!


Пример можно посмотреть вот здесь: http://rdt.org.ru/konkurs_70_let_pobedy

Выдержка из статьи:

Для получения на своем сайте точно такого же эффекта слайдшоу, вам потребуется подключить библиотеку jQuery:

JavaScript код:<script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 

Далее в том месте Вашей странички, где Вы планируете разместить изображения и подписи к ним, которые будут автоматически меняться, добавите следующий код:

HTML код:<div align="center" style="height:220px;">
<img src="image/img_1.png" alt="" id="slide_show"><br>
<span id="slide_text">Картинка 1</span>
</div>

 

Если необходимо, то Вы можете добавить кнопки для остановки и продолжения смены изображений, а так же кнопки перехода к нужному изображению:

HTML код: 

 

<span style="color:blue; cursor:pointer;" onclick="chgImg(2)">Давай вторую</span>
&nbsp;&nbsp;&nbsp;
<span style="color:blue; cursor:pointer;" onclick="chgImg(4)">Давай четвертую</span>
<br><br>

<span style="color:blue; cursor:pointer;" onclick="clearInterval(play)">Стоп</span>
&nbsp;&nbsp;&nbsp;
<span style="color:blue; cursor:pointer;" onclick="play=setInterval('chgImg(0)',
5000);">Продолжить</span>

 

В низу сайта разместите JavaScript код, который и будет делать всю работу по плавной смене изображений и подписей к ним, а также осуществлять переход к нужному изображению:

JavaScript код:<script type="text/javascript">
var imgs = ["image/img_1.png","image/img_2.png","image/img_3.png","image/img_4.png"];
var text = ['Картинка 1','<a href="index.php">Картинка 2</a>',
            '<font color="red">Картинка 3</font>','Картинка 4'];
var n=0;time=800;play=setInterval("chgImg(0)", 5000);

function chgImg(number) {
if (number!=0) n=number-2;
 $('#slide_show').fadeOut(time, function() {    //для картинок
  $(this).attr('src', imgs[n]).fadeIn(time);
 });

 $('#slide_text').fadeOut(time, function() {    //для текста
  $(this).html(text[n]).fadeIn(time);
 });
n++;
if (n>=imgs.length) n=0;
}</script>

Материла взят с сайта: http://usefulscript.ru/slide_show_jquery.php