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



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

Как создать слайд шоу на 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 пример, а также сказать исходный файл урока.

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



Похожие статьи

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>