Доступный слайдер 2/2

Доступный слайдер - 2/2

22.01.2019

За годы, прошедшие с момента первой публикации статьи, технологии слишком сильно изменились. Пожалуйста, не следуйте приведенному ниже руководству о том, как создать слайдер, а смотрите на вещи только как на рекомендации для некоторых основных принципов, таких как:

  1. классы в JavaScript
  2. общедоступные и частные переменные объекта JS
  3. наличие в JS:
  1. сайт не должен ломаться без JS
  2. элементы управления, которые мы добавляем для работы с клавиатурой

Мы подошли ко второй части урока. Здесь мы посмотрим на JS-код, который превратит наш список в настоящий слайдер..

Загрузка JavaScript

В HTML-коде, который мы используем для загрузки нашего скрипта, есть небольшая особенность, которую вы могли пропустить, просматривая код из первого урока, а именно атрибут defer = "defer". Это новый атрибут, добавленный в HTML5, который разрешен только для внешних тегов скрипта (те, которые имеют атрибут src и загружают код из другого файла, а код не является встроенным — не позволяйте слову «внешний» сбивать вас с толку, это скрипты из другого домена — другие домены в данном случае не имеют значения), который необходимо выполнить после анализа всего HTML-кода на странице. Другими словами — скрипты должны запускаться автоматически при событии DOM Ready..

Однако в самом скрипте я добавлю обработчик событий DOM Ready, поскольку старые браузеры не поддерживают этот атрибут. Таким образом, если браузер достаточно новый, я понимаю, что простой рендеринг страницы не будет задерживаться JIT-компиляцией JS-кода, и это как загрузка его в конце сайта, но я все еще сохраняю макет страницы. все файлы JS. в голове, что я считаю семантическим и упорядоченным, и поэтому я придерживаюсь этого.

Чтобы наш код был хорошо организован и можно было использовать повторно, мы обернем его простым классом JS. Поскольку наш код будет зависеть от jQuery, лучше всего сделать это в виде плагина jQuery, но в этом случае я пропущу эту часть и оставлю ее для какого-нибудь будущего урока..

ООП JavaScript

Мы определим новый класс с именем Slider. В JavaScript это делается путем простого создания новой функции с таким именем..

function Slider () {
}

Мы разработаем функцию, добавив аргумент, содержащий объект, который мы хотим превратить в слайдер, а также определим несколько параметров, которые нам понадобятся для самого слайдера..

function Slider () {// частные переменные var container = slider.addClass (‘js’); var ul = container.find (‘ul’); var lis = ul.find (‘ли’); var btnNext = null; вар btnPrev = ноль; var currentSlide = 0;
// общедоступные переменные this.duration = 300; }

Сам JavaScript не поддерживает общедоступные и частные переменные и методы, поэтому мы применяем другую функцию языка. Переменные, которые мы определяем с помощью var, являются частными, потому что они определены в области действия функции класса и не могут быть доступны вне этой функции..

Читать также:  Платформа анимации GreenSock (GSAP)

С другой стороны, переменные (в данном случае это только одна), которые определены как this. {Variable_name} являются общедоступными, потому что таким образом мы определяем их как часть класса, и всякий раз, когда у нас есть экземпляр этого класса, мы также имеем доступ к этим переменным.

Аналогичным образом мы создаем закрытый метод slideTo, который выполняет три простых действия:

  1. останавливает все текущие анимации, в которых участвует наш список
  2. начинается новая анимация
  3. устанавливает новое значение для переменной currentSlide.

function Slider () { …
// частные методы function slideTo (index) {ul.stop (); ul.animate ({left: ‘-‘ + (index * lis.outerWidth (true)) + ‘px’}, this.duration); currentSlide = index; }}

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

lis.outerWidth (true) возвращает точно ширину (включая отступы и поля для первого элемента lis).

Мы анимируем левый стиль ползунка, чтобы вычесть это смещение, которое мы вычислили. Минус, потому что мы относительно хотим переместить окно, через которое мы видим ползунок.

Да, но окно должно оставаться на своем месте, а не перемещаться, что означает, что вместо перемещения окна вправо мы должны перемещать элементы влево..

Мы также создаем два публичных метода — для возврата текущего слайда и для фокусировки слайдера..

function Slider () { …
// общедоступные методы this.currentSlide = function () {return currentSlide; }
this.focus = функция () {container.focus (); }}

Фокусировка возможна благодаря атрибуту tabindex, который мы добавили в наш слайдер в HTML. Это позволит нам через некоторое время добавить JavaScript, чтобы реагировать на события клавиатуры, когда наш ползунок находится в фокусе. Через некоторое время мы доберемся до них.

function Slider () { …
this.slideNext = function () {if (++ currentSlide> = lis.length) currentSlide = 0; slideTo (currentSlide); }
this.slidePrev = function () {if (—currentSlide 0) currentSlide = lis.length — 1; slideTo (currentSlide); }}

Мы добавляем еще два общедоступных метода, чтобы позволить другим скриптам взаимодействовать с нашим слайдером и переходить к следующему слайду или возвращаться к предыдущему..

Инициализация

После того, как мы подготовили большую часть функций слайдера, остается его инициализировать..

function Slider () { …
// инициализация slider.data (‘слайдер’, this);
container.append (‘a href = "#" class = "prev" /> a href = "#" class = "next" />’);
btnNext = container.find (‘a.next’). click (function () {s.slideNext (); return false;});
btnPrev = container.find (‘a.prev’). click (function () {s.slidePrev (); return false;});
container.keydown (function (e) {if (e.which == 39) {s.slideNext ();} else if (e.which == 37) {s.slidePrev ();}});
this.focus (); }

Читать также:  DISC категоризация людей в зависимости от того как они работают

Сначала мы пишем ссылку на сам объект слайдера как свойство данных элемента, который мы превращаем в слайдер. Небольшое удобство, если у нас на странице несколько слайдеров и мы не храним их в отдельных переменных.

Затем мы добавляем две ссылки, которые будут использоваться для навигации по ползунку..

К каждой из этих ссылок мы добавляем обработчик события щелчка, который вызывает соответствующие методы ползунка навигации. Вот переменная s, которая может вас запутать. Это должно быть именно так, но поскольку метод вызывается в этой функции, внутри это просто ссылка, по которой щелкают. По этой причине нам нужно создать новую переменную, которая содержит ссылку на объект класса, который отличается от этого, который мы можем использовать в функции обработчика событий. Эту переменную проще всего записать просто в начале кода функции класса:

var s = this;

Больше ничего не нужно.

Добавить доступность

Обработчики событий для нажатия на контейнер следуют.

Эти события происходят только тогда, когда он в фокусе — поэтому мы были.

Лично я считаю, что возможность слайдера, который мы делаем, жизненно важна, потому что это то, что делает его доступным..

Доступность JS означает не только то, что он ненавязчив (написан так, чтобы ничего не ломалось, когда у посетителей сайта нет JavaScript), но и то, что код позволяет вам работать с контентом даже без мыши..

Доступность проявляется во многих формах, и мы всегда должны заботиться обо всех.

Эта особенность фокуса слайдера — доступность, навигация с помощью стрелок на клавиатуре нашего компьютера также предназначена для доступности. Я встречал много плагинов слайдеров jQuery — многие из них были созданы, многие были созданы только во время обучения, но я никогда не видел полностью доступного слайдера..

Ползунок, который мы здесь делаем, значительно ограничен и не годится, если он станет плагином, но, вероятно, это одно из лучших индивидуальных решений, если вы создадите веб-сайт.

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

Вам также может показаться забавным, что, хотя наш код является решением jQuery, мы никогда не использовали ни $, ни jQuery, что удобно при использовании нескольких библиотек и jQuery.noConflict ().

В конце нашего файла сценария нам просто нужно добавить настоящий код jQuery для нашей страницы, который будет ждать события DOM Ready и создавать новый экземпляр нашего слайдера, дав ему элемент div id = "slider", который мы создали с помощью эта цель.

Читать также:  Хук GIT postmerge для объединения и минимизации JavaScript

jQuery (function () {var slider = new Slider ($ (‘# slider’));});

Полный код

Вот полный код наших трех файлов (HTML, CSS и JS), а в конце статьи есть ссылка на демонстрацию обеих частей урока..

!DOCTYPE html>
html>
голова>
meta charset = "utf-8">
заголовок> Слайдер / заголовок>
ссылка rel = "stylesheet" href = "style.css" media = "all" />
тип скрипта = "text / javascript" charset = "utf-8" src = "http://code.jquery.com/jquery-1.6.min.js"> / script>
тип скрипта = "text / javascript" charset = "utf-8" src = "func.js" defer = "defer"> / script>
/ голова>
тело>
div id = "слайдер" tabindex = "0">
ul>
li> img src = "images / slide-1.jpg" alt = "" /> / li>
li> img src = "images / slide-2.jpg" alt = "" /> / li>
li> img src = "images / slide-3.jpg" alt = "" /> / li>
li> img src = "images / slide-4.jpg" alt = "" /> / li>
li> img src = "images / slide-5.jpg" alt = "" /> / li>
/ ul>
/ div>
/ body>
/ html>
* {маржа: 0; отступ: 0; } body {padding: 20px 0; фон: # 333; цвет: #FFF; шрифт: обычный 12px Arial, Helvetica, без засечек; }
#slider {позиция: относительная; ширина: 960 пикселей; маржа: 0 авто; граница: 2px solid # 000; } #slider: focus {контур: нет; } #slider ul {ширина: 100%; тип-стиль-список: нет; переполнение: скрыто; } #slider ul li {display: inline; плыть налево; } #slider li img {float: left; }
# slider.js {height: 540px; переполнение: скрыто; } # slider.js: focus {цвет границы: # 666; } # slider.js ul {позиция: абсолютная; ширина: 50000эм; высота: 100%; } # slider.js ul li {width: 960px; высота: 100%; } # slider.js a {position: absolute; верх: 250 пикселей; z-индекс: 10; ширина: 20 пикселей; высота: 40 пикселей; фон: rgba (255, 255, 255, 0.2); } # slider.js .next {right: 10px; } # slider.js .prev {left: 10px; }
function Slider (слайдер) {// держатель объекта var s = this;
// частные переменные var container = slider.addClass (‘js’); var ul = container.find (‘ul’); var lis = ul.find (‘ли’); var btnNext = null; вар btnPrev = ноль; var currentSlide = 0;
// общедоступные переменные this.duration = 300;
// частные методы function slideTo (index) {ul.stop (); ul.animate ({left: ‘-‘ + (index * lis.outerWidth (true)) + ‘px’}, this.duration); currentSlide = index; }
// общедоступные методы this.currentSlide = function () {return currentSlide; }
this.focus = функция () {container.focus (); }
this.slideNext = function () {if (++ currentSlide> = lis.length) currentSlide = 0; slideTo (currentSlide); }
this.slidePrev = function () {if (—currentSlide 0) currentSlide = lis.length — 1; slideTo (currentSlide); }
// инициализация slider.data (‘слайдер’, this);
container.append (‘a href = "#" class = "prev" /> a href = "#" class = "next" />’);
btnNext = container.find (‘a.next’). click (function () {s.slideNext (); return false;});
btnPrev = container.find (‘a.prev’). click (function () {s.slidePrev (); return false;});
container.keydown (function (e) {if (e.which == 39) {s.slideNext ();} else if (e.which == 37) {s.slidePrev ();}});
this.focus (); }
jQuery (function () {var slider = new Slider ($ (‘# slider’));});

https://magadanski.com/demo/slider/

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?