Как создать слайд шоу на javascript?

Приветствую вас дорогие друзья! В этом небольшом уроке я покажу, как можно наиболее простым способом создать слайд-шоу!

Слайд-шоу – это галерея на javascript, в которой изображения меняются автоматически через определенный промежуток времени.

В нашей галерее, при смене изображения, мы будет использовать небольшой эффект, а именно – изменение прозрачности картинки!

Простой Html код:

<div class="slideshow"><img src="http://sergey-oganesyan.ru/wp-content/uploads/2017/01/11.jpg"></div>

Здесь все очень просто – в блок с классом slideshow помещаем изображение, которое будет первым.

А вот, собственно, и стили вышеупомянутого класса:

.slideshow{
    width: 500px;
    margin: 40px auto;
}

Задаем ширину и выравниваем блок по центру.
 

Теперь подробнее рассмотрим и разберем javascript (Jquery) код:

$(document).ready(function(){
        
        //Массив картинок
        var image_array = [
        'http://sergey-oganesyan.ru/wp-content/uploads/2017/01/11.jpg',
        'http://sergey-oganesyan.ru/wp-content/uploads/2017/01/21.jpg',
        'http://sergey-oganesyan.ru/wp-content/uploads/2017/01/31.jpg',
        'http://sergey-oganesyan.ru/wp-content/uploads/2017/01/41.jpg',
        'http://sergey-oganesyan.ru/wp-content/uploads/2017/01/51.jpg',
        ];
        
        var image_num = 1;

        function slide() { 
                
                $('.slideshow img').animate({opacity: 0.4}, 500).attr('src',image_array[image_num]).animate({opacity: 1}, 500);
                image_num++;
                
                if( image_num == image_array.length ){
                        image_num = 0;
                }
        
        }
        setInterval(slide, 3000);
});

Сначала описывается массив image_array, содержащий ссылки на изображения. Если вам нужно добавить, удалить или изменить картинки галереи, то просто замените ссылки в этом массиве – больше ничего изменяться не нужно!

Переменная image_num используется в качестве счетчика картинок. Когда мы доходим до последней картинки массива, мы обнуляем эту переменную, чтобы снова начать показ с первой картинки (делаем зацикливание).

Далее идет функция slide, которая и реализует перелистывание – это делается так (по шагам):

1. берем картинку из блока с классом slideshow;
2. делаем её на 40% прозрачной (это происходит за 500 миллисекунд);
3. после этого меняем атрибут src у картинки (меняем ссылку на картинку, взяв её из массива image_array);
4. далее делаем картинку непрозрачной (это тоже происходит за 500 миллисекунд).

Как я уже говорил, переменная image_num – это счетчик, его мы сравниваем с длиной массива (то есть с количеством картинок участвующих в слайд шоу) и если image_num равен максимальному значению, то обнуляем его.

Функция slide запускается каждые 3 секунды (3000 миллисекунд) с помощью интервала (setInterval), это значит, что картинки будут перелистываться каждые 3 секунды.

Как видите, ничего сложного нет!

На этом данный урок по javascript подошел к завершению, теперь можете взглянуть на demo пример, а также сказать исходный файл урока.

Demo пример

Скачать исходник

На этом все, до новых уроков, пока!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.