Home-theater-designers
Если вы читали наше руководство по как сделать сайт , возможно, вам интересно, что делать дальше, чтобы улучшить свои навыки. Создание слайд-шоу из фотографий - удивительно простая задача, которая может научить вас ценным навыкам, необходимым для работы в области программирования.
Сегодня я покажу вам, как создать слайд-шоу на JavaScript с нуля. Давайте прямо сейчас!
Предпосылки
Прежде чем приступить к программированию, вам необходимо знать несколько вещей. Наряду с соответствующим веб-браузером и текстовым редактором по вашему выбору (я рекомендую Возвышенный текст ) вам понадобится опыт работы с HTML , CSS , JavaScript , а также jQuery .
Если вы не уверены в своих навыках, обязательно прочтите наше руководство по использованию объектной модели документа и эти советы по изучению 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 class, не забывая при необходимости обновлять имена и идентификаторы файлов.
Наконец, созданы кнопки навигации. Они позволяют пользователю перемещаться по изображениям:
❮
❯ Эти 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;
}Теперь это выглядит намного лучше, правда? Посмотрим на код.
Я использую образцы изображений, все 670 x 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;
}
}
});Это может показаться нелогичным, но я собираюсь пропустить начальные блоки кода и сразу перейти к объяснению кода с середины - не волнуйтесь, я объясню весь код!
Вам нужно определить две переменные. (Вот как определить переменные в JavaScript.) Эти переменные можно рассматривать как основные переменные конфигурации для слайд-шоу:
var currentImage = 1;
var totalImages = 3;В них хранится общее количество изображений в слайд-шоу и номер изображения, с которого нужно начать. Если у вас есть больше изображений, просто измените totalImages переменной к общему количеству изображений, которые у вас есть.
Две функции УвеличитьИзображение а также уменьшение изображения наступать или отступать currentImage Переменная. Если эта переменная опустится ниже единицы или выше totalImages , он сбрасывается на единицу или totalImages . Это гарантирует, что слайд-шоу будет зацикливаться, когда достигнет конца.
Вернемся к коду в начале. Этот код 'нацелен' на следующие и предыдущие кнопки. При нажатии на каждую кнопку вызывается соответствующий увеличивать или снижаться методы. По завершении он просто затемняет изображение на экране и исчезает в новом изображении (как определено currentImage Переменная).
В останавливаться() Метод встроен в jQuery. Это отменяет все ожидающие события. Это гарантирует плавное нажатие каждой кнопки и означает, что у вас не будет 100 нажатий всех кнопок, ожидающих выполнения, если вы немного сходите с ума от мыши. В fadeIn (1) а также выцветание (1) методы увеличивают или уменьшают изображение по мере необходимости. Число указывает продолжительность плавного перехода в миллисекундах. Попробуйте изменить это число на большее, например 500. Чем больше число, тем дольше время перехода. Однако если зайти слишком далеко, вы можете начать замечать странные события или «мерцания» между сменами изображения. Вот слайд-шоу в действии:
Автоматическое продвижение
Сейчас это слайд-шоу выглядит неплохо, но нужен последний штрих. Автоматическое продвижение - это функция, которая действительно сделает это слайд-шоу ярким. По истечении заданного периода времени каждое изображение автоматически переходит к следующему. Однако пользователь по-прежнему может перемещаться вперед или назад.
как удалить сообщения на Mac
Это простая работа с jQuery. Необходимо создать таймер для выполнения вашего кода каждые Икс секунд. Однако, вместо того, чтобы писать новый код, проще всего имитировать «щелчок» по кнопке следующего изображения и позволить существующему коду выполнить всю работу.
Вот новый код JavaScript, который вам нужен - добавьте его после уменьшение изображения функция:
window.setInterval(function() {
$('#previous').click();
}, 2500);Здесь не так много всего. В window.setInterval будет регулярно запускать фрагмент кода в соответствии со временем, указанным в конце. Время 2500 (в миллисекундах) означает, что слайд-шоу будет продвигаться каждые 2,5 секунды. Меньшее число означает, что каждое изображение будет продвигаться быстрее. В щелкнуть запускает кнопки для запуска кода, как если бы пользователь нажал кнопку своей мышью.
Если вы готовы к следующему вызову JavaScript, попробуйте создать веб-сайт с помощью конструктора статических веб-сайтов, такого как GatsbyJS, или интерфейсного фреймворка, такого как Vue. Если вы изучаете Ruby, Jekyll также подойдет вам. Вот как Джекил и GatsbyJS выступают друг против друга.
Изображение предоставлено: Тхаранат Сардри через Shutterstock.com
Делиться Делиться Твитнуть Эл. адрес 8 лучших сайтов для бесплатной загрузки аудиокнигАудиокниги - отличный источник развлечения, и их гораздо легче усвоить. Вот восемь лучших веб-сайтов, где вы можете скачать их бесплатно.
Читать далее Похожие темы- Программирование
- JavaScript
- Веб-дизайн
Джо закончил факультет компьютерных наук Линкольнского университета в Великобритании. Он профессиональный разработчик программного обеспечения, и когда он не пилотирует дроны и не пишет музыку, его часто можно встретить фотографирующим или снимающим видео.
Ещё от Joe CoburnПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!
Нажмите здесь, чтобы подписаться