Если вы прочитали наше руководство о том, как создать веб-сайт , вам может быть интересно, что делать дальше, чтобы улучшить свои навыки. Создание слайд-шоу с фотографиями — удивительно простая задача, которая может научить вас ценным навыкам, необходимым для получения работы по программированию .
Сегодня я покажу вам, как создать слайд-шоу JavaScript с нуля. Давайте прыгнем прямо в!
Предпосылки
Вам нужно знать несколько вещей, прежде чем вы сможете начать писать код. Наряду с соответствующим веб-браузером и текстовым редактором по вашему выбору (я рекомендую Sublime Text ) вам понадобится некоторый опыт работы с HTML , CSS , JavaScript и jQuery .
Если вы не уверены в своих навыках, обязательно прочитайте наше руководство по использованию объектной модели документа и эти советы, чтобы изучить CSS . Если вы уверены в JavaScript, но никогда ранее не использовали jQuery, ознакомьтесь с нашим базовым руководством по jQuery
1. Начало работы
Это слайд-шоу требует нескольких функций:
- Поддержка изображений
- Элементы управления для изменения изображений
- Текстовая подпись
- Автоматический режим
Кажется, простой список функций. Автоматический режим автоматически продвигает изображения к следующему в последовательности. Вот грубый набросок, который я сделал перед написанием любого кода:
Если вы задаетесь вопросом, зачем беспокоиться о планировании, взгляните на эти наихудшие ошибки программирования в истории Этот проект никого не убьет, но важно иметь четкое понимание кода и процедур планирования, прежде чем работать над большим кодом — даже если это всего лишь грубый набросок.
Вот исходный HTML-код, необходимый для начала работы. Сохраните это в файле с соответствующим именем, например, index.html :
<!DOCTYPE html> <html> <head> <style> </style> <title>MUO Slideshow</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> </script> </head> <body> <div id="showContainer"> <div class="imageContainer" id="im_1"> <img src="Images/1.jpg" /> <div class="caption"> Windmill </div> </div> <div class="imageContainer" id="im_2"> <img src="Images/2.jpg" /> <div class="caption"> Plant </div> </div> <div class="imageContainer" id="im_3"> <img src="Images/3.jpg" /> <div class="caption"> Dog </div> </div> <div class="navButton" id="previous">❮</div> <div class="navButton" id="next">❯</div> </div> </body> </html> Вот как выглядит код:
Это немного мусора, не так ли? Давайте разберемся с этим, прежде чем улучшать его.
Этот код содержит «стандартные» теги HTML , head , style , script и body . Эти части являются важными компонентами любого веб-сайта. JQuery включен через Google CDN — пока ничего уникального или особенного.
Внутри тела находится div с идентификатором showContainer . Это обертка или внешний контейнер для хранения слайд-шоу. Вы улучшите это позже с помощью CSS. Внутри этого контейнера есть три блока кода, каждый со схожей целью.
Родительский класс определяется именем класса imageContainer :
<div class="imageContainer" id="im_1">
Это используется для хранения одного слайда — изображение и заголовок хранятся внутри этого контейнера. Каждый контейнер имеет уникальный идентификатор, состоящий из символов im_ и числа. Каждый контейнер имеет разное количество, от одного до трех.
В качестве последнего шага, ссылка на изображение, и заголовок сохраняется внутри div с классом заголовка :
<img src="Images/1.jpg" /> <div class="caption"> Dog </div>
Я создал свои изображения с числовыми именами файлов и сохранил их в папке с изображениями . Вы можете называть свое как угодно, если вы обновляете HTML, чтобы соответствовать.
Если вы хотите, чтобы в слайд-шоу было больше или меньше изображений, просто скопируйте и вставьте или удалите блоки кода с помощью класса imageContainer , не забывая обновлять имена и идентификаторы файлов по мере необходимости.
Наконец, кнопки навигации созданы. Это позволяет пользователю перемещаться по изображениям:
<div class="navButton" id="previous">❮</div> <div class="navButton" id="next">❯</div>
Эти коды сущностей 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 x 503 пикселей , поэтому это слайд-шоу в основном предназначено для изображений такого размера. Вам нужно будет соответствующим образом настроить CSS, если вы хотите использовать изображения другого размера. Я рекомендую изменить размер изображений до соответствующих размеров — разные изображения разных размеров вызовут проблемы с оформлением.
Большая часть этого CSS говорит сама за себя. Есть код для определения размера контейнера для хранения изображений, выравнивания по центру, указания шрифта, а также цвета кнопки и текста. Есть несколько стилей, с которыми вы, возможно, раньше не сталкивались:
- курсор: указатель — при перемещении курсора по кнопкам курсор из стрелки превращается в указательный палец.
- непрозрачность: 0,65 — это увеличивает прозрачность кнопок.
- user-select: none — это гарантирует, что вы не сможете случайно выделить текст на кнопках.
Вы можете увидеть результат большей части этого кода в кнопках:
Самая сложная часть здесь — это странно выглядящая строка:
.imageContainer:not(:first-child) {
Это может выглядеть довольно необычно, однако это довольно очевидно.
Во-первых, он нацелен на любые элементы с классом imageContainer . Синтаксис : not () гласит, что любые элементы внутри скобок должны быть исключены из этого стиля. Наконец, синтаксис : first-child утверждает, что этот 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 на общее количество изображений, которые у вас есть.
Две функции увеличения и уменьшения изображения увеличивают или уменьшают переменную currentImage . Если эта переменная становится меньше единицы или превышает totalImages , она сбрасывается до единицы или totalImages . Это гарантирует, что слайд-шоу будет повторяться, как только оно достигнет конца.
Вернуться к коду в начале. Этот код «нацелен» на следующую и предыдущую кнопки. Когда вы нажимаете на каждую кнопку, она вызывает соответствующие методы увеличения или уменьшения . После завершения он просто затухает изображение на экране и затухает в новом изображении (как определено переменной currentImage ).
Метод stop () встроен в jQuery. Это отменяет любые ожидающие события. Это гарантирует, что каждое нажатие кнопки будет плавным, и означает, что у вас нет 100 нажатий кнопок, все ожидающие выполнения, если вы немного сходите с ума от мыши. Методы fadeIn (1) и fadeOut (1) постепенно увеличивают или уменьшают изображения по мере необходимости. Число указывает продолжительность замирания в миллисекундах. Попробуйте изменить это значение на большее, например, 500. Чем больше число, тем больше время перехода. Однако заходите слишком далеко, и вы можете начать видеть странные события или «мерцания» между изменениями изображения. Вот слайд-шоу в действии:
Автоматическое продвижение
Это слайд-шоу выглядит довольно хорошо сейчас, но есть еще один последний штрих. Автоматическое продвижение — это функция, которая действительно заставит этот слайд-шоу сиять. По истечении заданного периода времени каждое изображение будет автоматически переходить к следующему. Однако пользователь все еще может перемещаться вперед или назад.
Это простая работа с jQuery. Нужно создать таймер для выполнения вашего кода каждые X секунд. Однако вместо написания нового кода проще всего эмулировать «щелчок» по кнопке следующего изображения и позволить существующему коду выполнить всю работу.
Вот новый JavaScript, который вам нужен — добавьте его после функции lowerImage:
window.setInterval(function() { $('#previous').click(); }, 2500);
Здесь не так много всего происходит. Метод window.setInterval будет регулярно запускать фрагмент кода, как определено временем, указанным в конце. Время 2500 (в миллисекундах) означает, что это слайд-шоу будет продвигаться каждые 2,5 секунды. Меньшее число означает, что каждое изображение будет двигаться быстрее. Метод click вызывает кнопки для запуска кода, как если бы пользователь щелкнул мышью по кнопке.
Если вы готовы к следующему испытанию JavaScript, попробуйте создать сайт со статическим конструктором сайтов, таким как GatsbyJS. Если вы изучаете Ruby, Jekyll также подойдет. Вот как Jekyll и GatsbyJS ведут борьбу друг против друга.
Изображение предоставлено: Tharanat Sardsri через Shutterstock.com