Как создать слайд-шоу на JavaScript за 3 простых шага

Содержание

1 Предпосылки
2 1. Начало работы
3 2. CSS
4 3. JavaScript
5 Автоматическое продвижение

Если вы прочитали наше руководство о том, как сделать сайт

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

Сегодня я покажу вам, как создать слайд-шоу на JavaScript с нуля. Давайте прыгать прямо в!

Предпосылки

Вам нужно знать несколько вещей, прежде чем вы сможете начать писать код. Наряду с соответствующим веб-браузером и текстовым редактором по вашему выбору (я рекомендую Sublime Text), вам понадобится некоторый опыт работы с HTML, CSS, JavaScript, а также JQuery.

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

и 5 маленьких шагов для изучения CSS

, Если вы уверены в JavaScript, но никогда не использовали jQuery, ознакомьтесь с нашим основным руководством по jQuery.

1. Начало работы

Это слайд-шоу требует нескольких функций:

Поддержка изображений
Элементы управления для изменения изображений
Текстовая подпись
Автоматический режим

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

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

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

Вот исходный HTML-код, необходимый для начала работы. Сохраните это в файле с соответствующим именем, например index.html:


MUO Slideshow

Windmill

Plant

Dog
❮
❯

Вот как выглядит код:

Это немного мусора, не так ли? Давайте разберемся с этим прежде, чем мы улучшим это.

Этот код содержит «стандарт» HTML, голова, стиль, скрипт, а также тело теги. Эти части являются важными компонентами любого веб-сайта. JQuery включен через Google CDN — пока ничего уникального или особенного.

Внутри тела находится div с идентификатором showContainer. Это оболочка или внешний контейнер для хранения слайд-шоу. Вы улучшите это позже с помощью CSS. Внутри этого контейнера есть три блока кода, каждый с одинаковым назначением.

Родительский класс определяется с именем класса imageContainer:

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

В качестве последнего шага, ссылка на изображение, и заголовок сохраняется внутри div с подпись учебный класс:

Dog

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

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

Наконец, кнопки навигации созданы. Это позволяет пользователю перемещаться по изображениям:


❮
❯

Эти HTML-сущность коды используются для отображения стрелок вперед и назад, аналогично тому, как работают пиктограммы

2. CSS

Теперь, когда основная структура создана, пришло время сделать ее красивой. Вот как это будет выглядеть после этого нового кода:

Добавьте этот CSS между вашими стиль теги:

html {
font-family: helvetica, arial;
}
#showContainer {
/* Main wrapper for all images */
width: 670px;
padding: 0;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.navButton {
/* Make buttons look nice */
cursor: pointer;
float: left;
width: 25px;
height: 22px;
padding: 10px;
margin-right: 5px;
overflow: hidden;
text-align: center;
color: white;
font-weight: bold;
font-size: 18px;
background: #000000;
opacity: 0.65;
user-select: none;
}
.navButton:hover {
opacity: 1;
}
.caption {
float: right;
}
.imageContainer:not(:first-child) {
/* Hide all images except the first */
display: none;
}

Теперь это выглядит намного лучше, верно? Давайте посмотрим на код.

Я использую образцы изображений с нашего Panasonic G80 / G85

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

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

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

Вы можете увидеть результат большей части этого кода в кнопках:

Самая сложная часть здесь — это странно выглядящая строка:

.imageContainer:not(:first-child) {

Это может выглядеть довольно необычно, однако это довольно очевидно.

Во-первых, он нацелен на любые элементы с imageContainer учебный класс. :не() Синтаксис гласит, что любые элементы внутри скобок должны быть исключены из этого стиля. Наконец, :Первый ребенок Синтаксис гласит, что этот CSS должен предназначаться для любого элемента, соответствующего имени, но игнорировать первый элемент. Причина этого проста. Поскольку это слайд-шоу, требуется только одно изображение за раз. Этот CSS скрывает все изображения, кроме первого.

3. JavaScript

Последняя часть головоломки — JavaScript. Это логика для правильного выполнения слайд-шоу.

Добавьте этот код к вашему скрипт тег:

$(document).ready(function() {
$('#previous').on('click', function(){
// Change to the previous image
$('#im_' + currentImage).stop().fadeOut(1);
decreaseImage();
$('#im_' + currentImage).stop().fadeIn(1);
});
$('#next').on('click', function(){
// Change to the next image
$('#im_' + currentImage).stop().fadeOut(1);
increaseImage();
$('#im_' + currentImage).stop().fadeIn(1);
});
var currentImage = 1;
var totalImages = 3;
function increaseImage() {
/* Increase currentImage by 1.
* Resets to 1 if larger than totalImages
*/
++currentImage;
if(currentImage > totalImages) {
currentImage = 1;
}
}
function decreaseImage() {
/* Decrease currentImage by 1.
* Resets to totalImages if smaller than 1
*/
--currentImage;
if(currentImage < 1) {
currentImage = totalImages;
}
}
});

Это может показаться нелогичным, но я собираюсь пропустить начальные блоки кода и перейти к объяснению кода с середины - не волнуйтесь, я объясню весь код!

Вам нужно определить две переменные. Их можно рассматривать как основные переменные конфигурации для слайд-шоу:

var currentImage = 1;
var totalImages = 3;

Они хранят общее количество изображений в слайд-шоу и номер изображения, с которого нужно начать. Если у вас есть больше изображений, просто измените totalImages переменная к общему количеству изображений у вас есть.

Две функции increaseImage а также decreaseImage продвигаться или отступать currentImage переменная. Должна ли эта переменная быть меньше единицы или выше totalImages, он сбрасывается на один или totalImages. Это гарантирует, что слайд-шоу будет зациклено, как только оно достигнет конца.

Вернуться к коду в начале. Этот код «нацелен» на следующую и предыдущую кнопки. Когда вы нажимаете на каждую кнопку, он вызывает соответствующий увеличение или же снижение методы. После завершения он просто затухает изображение на экране и исчезает в новом изображении (как определено currentImage переменная).

стоп() Метод встроен в JQuery. Это отменяет любые ожидающие события. Это гарантирует, что каждое нажатие кнопки будет плавным, и означает, что у вас нет 100 нажатий кнопок, все ожидающие выполнения, если вы немного сходите с ума от мыши. FadeIn (1) а также FadeOut (1) методы постепенно увеличивают или уменьшают изображения по мере необходимости. Число указывает продолжительность замирания в миллисекундах. Попробуйте изменить это значение на большее, например, 500. Чем больше число, тем больше время перехода. Однако заходите слишком далеко, и вы можете начать видеть странные события или «мерцания» между изменениями изображения. Вот слайд-шоу в действии:

Автоматическое продвижение

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

Это простая работа с jQuery. Необходимо создать таймер для выполнения вашего кода каждый Икс секунд. Однако вместо написания нового кода проще всего эмулировать «щелчок» по кнопке следующего изображения и позволить существующему коду выполнить всю работу.

Вот новый JavaScript, который вам нужен - добавьте его после decreaseImage функция:

window.setInterval(function() {
$('#previous').click();
}, 2500);

Здесь не так много всего происходит. window.setInterval Метод будет запускать кусок кода регулярно, как определено временем, указанным в конце. Время 2500 (в миллисекундах) означает, что слайд-шоу будет выполняться каждые 2,5 секунды. Меньшее число означает, что каждое изображение будет двигаться быстрее. щелчок Метод запускает кнопки для запуска кода, как если бы пользователь щелкнул мышью по кнопке.

Вы узнали новые навыки сегодня? Какой твой любимый трюк, чтобы оживить слайд-шоу? Дайте нам знать в комментариях ниже!

Изображение предоставлено: Tharanat Sardsri через Shutterstock.com