Сегодня давайте рассмотрим создание простого слайд-шоу фотографий для веб-сайта в простом HTML и Javascript. Конечно, у большинства CMS для веб-сайтов уже есть плагины для подобных вещей, но допустим, вы делаете что-то действительно простое и не используете CMS.
Обратите внимание, что в настоящее время я не занимаюсь каким-либо стилем, и я не беспокоюсь о реализации мобильных приложений или о чем-то подобном. Почему? Ну, во-первых, я предполагаю, что вы уже используете существующую систему для этого. (например, Bootstrap или Bulma). Во-вторых, я не хочу вступать в какие-либо дебаты о том, какая библиотека css лучше или что-то в этом роде. Я оставлю стиль на ваше усмотрение и, возможно, расскажу об этом позже, если кто-то захочет.
Тег шаблона
Тег ‹template› в HTML, возможно, не совсем вам знаком. Я знаю, что не был до недавнего времени.
Это тег, который позволяет вам иметь содержимое в вашем HTML, скрытое от пользователя, которым можно манипулировать и использовать с помощью Javascript. Идеально, если у вас есть какой-то контент, который вы хотите использовать снова и снова, но не хотите каждый раз «создавать» или «конструировать» его. Вы можете поместить контент в шаблон, а затем использовать Javascript, чтобы получить этот контент и отобразить его так, как вам нравится.
В нашем случае для этого простого слайд-шоу у нас будет шаблон для каждого изображения, которое будет отображаться в слайд-шоу. Таким образом, как только Javascript будет завершен и заработает, вы сможете добавлять или удалять изображения в слайд-шоу, просто добавляя или удаляя шаблон.
HTML
Как упоминалось выше, HTML для этого будет очень простым.
Мы поместим элемент контейнера, в котором будут отображаться изображения. Что-то вроде этого.
‹div id="слайд-шоу"›‹/div›
Я оставлю стиль и размещение на ваше усмотрение.
Затем мы добавим раздел шаблона для каждого из наших изображений, которые мы хотим использовать в слайд-шоу.
Что-то вроде этого.
‹template›
‹img src="images/pic001.png"›
‹/template›
Повторите это столько раз, сколько вам нужно, чтобы включить все ваши изображения. pic002.png, pic003.png и т. д. и т. д. и т. д.
Если вы сейчас откроете страницу в своем веб-браузере, вы заметите, что все эти теги img вообще не видны. Это связано с тем, что тег шаблона скрывает этот контент от зрителя до тех пор, пока он не будет отображаться с использованием Javascript.
JavaScript
Давайте теперь создадим очень простой объект Javascript, который будет управлять показом слайдов. В нем не будет анимации или переходов, но он позволит нам управлять некоторыми вещами. Мы сможем указать элемент-контейнер, в котором будет отображаться слайд-шоу. (Мы создали его ранее с идентификатором «слайд-шоу»)
Мы также сможем установить время показа каждого слайда, указав количество секунд при запуске функции. Кроме того, у нас будут функции для изменения задержки слайда, а также для перехода вперед или назад вручную, если вы хотите это разрешить.
Я создал файл Javascript с оригинальным названием: slideshow.js.
Если вы никогда раньше не имели дело с объектами в Javascript, то это может немного сбить вас с толку. В этом случае наш объект также является конструктивной функцией. Итак, начнем с создания новой функции.
функция SlideShow (container_id, задержка = 5) {
Затем мы добавим некоторые свойства объекта, которые превратят его из обычной функции в объект (оставаясь при этом функцией;))
this.index = 0;
this.templates = document.querySelectorAll («шаблон»);
this.slideDelay = задержка; // В секундах
this.interval = null;
this.container_id = container_id;
index будет удерживать текущую позицию слайд-шоу и будет увеличиваться или уменьшаться при смене слайдов. Довольно просто.
templates получит массив всех тегов шаблона в нашем html, который мы добавили ранее. Они будут содержать изображения для слайд-шоу.
slideDelay удерживает указанное время для показа каждого слайда в секундах. Мы передали это в функцию, а также установили по умолчанию значение 5. Таким образом, каждый слайд должен отображаться в течение указанного количества секунд, прежде чем переходить к следующему.
interval будет содержать ссылку на интервал, который мы создаем для автоматического переключения между слайдами.
container_id — это элемент html, в котором мы будем отображать наши изображения.
С этими объявленными переменными. Теперь давайте создадим метод, который возьмет наш шаблон и отобразит его в элементе контейнера. Мы будем использовать это всякий раз, когда будем двигаться вперед или назад в слайд-шоу.
this.updateSlide = function(template) {
// Очистить элемент контейнера
document.getElementById(this.container_id).innerHTML = '';
// Обновить элемент контейнера с помощью шаблона content
document.getElementById(this.container_id).appendChild(template);
}
Теперь давайте создадим метод, который будет переходить к следующему изображению в нашем слайд-шоу при каждом его вызове. Мы автоматизируем это с помощью устанавливаемой нами задержки, но ее также можно прикрепить к ссылке или кнопке, чтобы вручную продвигать слайд-шоу.
this.Next = function() {
// Увеличиваем индекс
this.index++;
// Проверяем, превышает ли индекс имеющиеся у нас шаблоны
if( this.index › this.templates.length — 1) {
// Если индекс превышает количество шаблонов,
// сбрасываем его на 0, чтобы начать заново
this.index = 0;
}
// Клонируем фрагмент шаблона для этого экземпляра
const templateClone = this.templates[this.index].content.cloneNode(true);
// Обновить новый шаблон в контейнер
this.updateSlide(templateClone);
};
Это достаточно просто. Когда функция вызывается, мы увеличиваем индексную переменную. Затем мы проверяем, не превысили ли мы количество слайдов, которое у нас есть, и если мы это сделали, мы возвращаемся к началу. Затем мы клонируем тег шаблона, соответствующий индексу, и вызываем нашу функцию updateSlide, чтобы отобразить его на странице.
Теперь функция вернуться?
this.Previous = function() {
// Увеличиваем индекс
this.index — ;
// Проверяем, превышает ли индекс имеющиеся у нас шаблоны
if (this.index ‹ 0) {
// Если индекс меньше 0
// сбросить его до последнего шаблона в массиве
this.index = this.elements.length — 1;
}
// Клонируем фрагмент шаблона для этого экземпляра
const templateClone = this.templates[this.index].content.cloneNode(true);
// Обновить новый шаблон в контейнер
this.updateSlide(templateClone);
}
Это почти то же самое, что и функция Next, за исключением того, что здесь мы уменьшаем индекс (потому что мы движемся назад), и затем нам нужно убедиться, что мы не опустились ниже 0. Если мы это сделали, мы вернемся к конец массива шаблонов, чтобы он зацикливался.
Мы не будем использовать метод Previous в этом примере, но он заложен на будущее. Вы можете расширить этот простой пример самостоятельно и разрешить постоянное изменение направления, а не просто возвращаться по одному слайду за раз.
Мы также добавим функцию, которая позволит нам изменять задержку во время работы.
this.changeDelay = function(delay) {
// Очистить существующий интервал, который у нас сейчас есть
clearInterval(this.interval);
// создаем новый интервал с новой задержкой
this.interval = setInterval(‘this.Next()’, this.slideDelay * 1000); // вызов следующей функции с интервалом в миллисекундах
}
Эта функция очищает существующий интервал и создает новый с новой задержкой, которую мы предоставляем. Мы передадим эту задержку в секундах, но системе нужны миллисекунды, поэтому мы умножаем наши секунды на тысячу, чтобы получить правильное значение.
Почти готово. Последний шаг — инициализировать первый слайд, который мы видим сразу, установить наше начальное значение задержки и активировать интервал. Мы все еще внутри нашего объекта/функции построения SlideShow, поэтому мы можем просто добавить эти команды здесь.
// Инициализировать первый слайд
var initialTemplate = this.templates[0].content.cloneNode(true);
this.updateSlide(initialTemplate);
// Установить начальный интервал
this.changeDelay(this.delay);
Затем просто завершите нашу функцию слайд-шоу. (Убедитесь, что вы сохранили файл вместе с HTML-файлом, который мы создали для начала)
}
Это наш простой объект слайд-шоу готов, и мы уже настроили HTML. Нам просто нужно ввести наш javascript на HTML-страницу и вызвать конструктор объекта SlideShow.
Итак, вернемся к HTML-странице. Внизу, прямо над тегом ‹/body› давайте добавим это.
‹script src="slideshow.js"›‹/script›
‹script›
SlideShow(“слайд-шоу”,5);
‹/script›
Как видите, мы включили только что написанный код javascript, а затем вызвали функцию из этого кода. Мы передали ему элемент для удержания слайд-шоу и задержку в пять секунд.
Если все прошло хорошо, вы должны увидеть, как изображения меняются каждые пять секунд и снова возвращаются к началу, когда оно доходит до конца.
Вы можете добавить ссылки или кнопки для перехода вручную или способ изменить задержку. Или вы можете установить его, как хотите, и оставить так, чтобы его нельзя было изменить. Тебе решать.
Это может быть полезно на веб-сайте для фотографа, на сайте обмена изображениями или для любого другого использования. Уверен, вы придумаете, как это использовать.
В будущем мы могли бы подумать о расширении этого, чтобы добавить некоторые стили и дополнительные функции, такие как рандомизация, полноэкранный режим и запоминание того, чем был занят пользователь, когда они возвращаются. Любые другие идеи?
