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


Приветствую вас дорогие друзья! В этом небольшом уроке я покажу, как можно наиболее простым способом создать слайд-шоу! Как создать слайд шоу на javascript? Слайд-шоу - это галерея на javascript, в которой изображения меняются автоматически через определенный промежуток времени. В нашей галерее, при смене изображения, мы будет использовать небольшой эффект, а именно - изменение прозрачности картинки! Простой Html код:
<div class="slideshow"><img src="https://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 = [
	'https://sergey-oganesyan.ru/wp-content/uploads/2017/01/11.jpg',
	'https://sergey-oganesyan.ru/wp-content/uploads/2017/01/21.jpg',
	'https://sergey-oganesyan.ru/wp-content/uploads/2017/01/31.jpg',
	'https://sergey-oganesyan.ru/wp-content/uploads/2017/01/41.jpg',
	'https://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 пример

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

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


Раздел: JavaScript с примерами

Дата последнего изменения: 2017-01-17 19:15:54

Просмотров: 11298

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

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*