Строим слайдер картинок на javascript, но без jQuery

Сразу отмечу — я люблю библиотеки jQuery и jQuery UI горячей конструктивной любовью, поскольку они во многих случаях весьма облегчают жизнь веб-разработчика. Однако, в последнее время появилась целая армия молодых дарований, которые не просто злоупотребляют этой библиотекой, а целенаправленно погружаются в пучину игнорирования его прародителя — чистого javascript.

Речь идет о юношах, которые монтируют целый каскад анимированных меню, дропдаунов, попапов и слайдеров из jQuery на сайт только потому, что «это круто» и «я не знаю, как по другому, в видеоуроке так было». При этом вся эта кухня навешена настолько неграмотно, что в итоге страничка прилично подтормаживает, а консоль пестрит угрожающими сообщениями об ошибках. Встречал я парней, которые писали код исключительно интуитивно, то есть копипастя куски кода из разных примеров и вставляя их на свой сайт, методом тыка и такой-то матери пытались его оживить, совершенно при этом не понимая базовых основ программирования. У некоторых даже получался какой-то результат.
Очевидно, что злоупотребление фреймворками и их бездумное использование приводит к глубокому непрофессионализму, поэтому данной статьей я хочу познакомить начинающих любителей фреймворочного псевдопрограммирования с классическим стилем написания лаконичных и функциональных программ на javascript.
Очень надеюсь, что пример кода ниже добавит начинающим веб-разработчикам понимание процесса правильного написания кода и повысит интерес к настоящему программированию.

Поскольку кроме своей основной работы веб-программистом я еще и преподаю по выходным введение в программирование для детей в небольшом учебном центре, то в качестве темы для одного из уроков я решил взять создание простейшего слайдера для сайта, который перелистывает картинки влево-вправо с помощью кнопок и по тайм-ауту.
Работа эта имела следующие учебные цели:
  • показать детям принцип построения объекта;
  • изучить на примере работу индексного массива;
  • познакомить в первом приближении с указателем this;
  • показать пример работы с функцией setInterval().


Полный код примера
<!DOCTYPE html>
<html lang="ru">
<head>
	<title>Урок 6. Пример объектно-ориентированного подхода.</title>
	<meta charset="utf-8">
</head>
<style>
#main {
	position:relative;
	margin: 100px auto;
	padding: 5px;
	width: 660px;
	height:360px;
	background-color: silver;
	border: 5px solid grey;
	border-radius:15px;
}
#scr {
	margin:20px auto;
	width: 600px;
	height: 320px;
	margin-top:20px;
	background-color: white;
	background-size:cover;
	border: 2px solid black;
	border-radius:10px;
}
button {
	position: absolute;
	top: 150px;
	width: 25px;
	height: 70px;
	font: 12pt arial,tahoma,sans-serif;
	text-align: center;
}
.left {
	left:5px;
}
.right {
	right:5px;
}
</style>
<script>
var slider = {
	slides:['ch01.jpg','ch02.jpg','ch03.jpg','ch04.jpg','ch05.jpg'],
	frame:0, // текущий кадр для отбражения - индекс картинки из массива
	set: function(image) { // установка нужного фона слайдеру
		document.getElementById("scr").style.backgroundImage = "url("+image+")";
	},
	init: function() { // запуск слайдера с картинкой с нулевым индексом
		this.set(this.slides[this.frame]);
	},
	left: function() { // крутим на один кадр влево
		this.frame--;
		if(this.frame < 0) this.frame = this.slides.length-1;
		this.set(this.slides[this.frame]);
	},
	right: function() { // крутим на один кадр вправо
		this.frame++;
		if(this.frame == this.slides.length) this.frame = 0;
		this.set(this.slides[this.frame]);		
	}
};
window.onload = function() { // запуск слайдера после загрузки документа
	slider.init();
	setInterval(function() { // ставим пятисекундный интервал для перелистывания картинок
		slider.right();
	},5000);
};
</script>
<body>
<div id="main">
	<button class="left" onclick="slider.left();"><</button>
	<div id="scr"></div>
	<button class="right" onclick="slider.right();">></button>
</div>	
</body>
</html>



Пример в работе можно посмотреть здесь

Работа была успешно выполнена с группой школьников в возрасте 11-14 лет. Код был предоставлен им сразу (поскольку молодежь почему-то крайне медленно бьет тексты на клавиатуре, совершая массу синтаксических ошибок), с подробными комментариями принципа его действия. Было также предложено самостоятельно поменять размер и оформление элементов слайдера, создать массив своих картинок для отображения, а также посмотреть, что будет, если имя файла картинки в массиве заменить на http-ссылку картинки и объяснить увиденное.
Tags:
javascript, основы языка, пример на понимание

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.