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

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

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


Раздел: Программирование

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

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

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript
Виртуальная клавиатура на javascript!
Как создать игру Память на javascript?

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

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

* Ваше имя:

Ваш e-mail:

*