Итак, вы закончили работу над своим сайтом или приложением, но заметили, что чего-то не хватает… Нет ничего, что сделало бы ваш сайт/приложение привлекательным или интересным. Сегодня, как никогда ранее, время внимания людей становится короче с каждым днем. Не то чтобы они становились глупее, просто в Интернете так много контента, что легко заскучать или найти что-то другое. Создание контента в Интернете с каждым днем становится все сложнее. Разные поколения пользуются Интернетом и его приложениями, что создает широкий спектр демографических групп, для которых необходимо создавать контент. Но некоторые вещи остаются неизменными. Например, очень важно, чтобы ваш контент читали!
Но как убедиться, что ваш контент будет прочитан?
Вы же не хотите, чтобы он был слишком большим, чтобы читатель не понял, что есть нечто большее, чем то, что привлекло его внимание. Как же решить эту дилемму?
Для начала, я бы подошел к этому как к собеседованию. Да, квалификация важна, но вам также нужно выглядеть соответствующим образом. Если вы не будете выглядеть подготовленным, то вам будет трудно понять, о чем вы говорите. Не то чтобы информация была плохой, но важно знать свою аудиторию — атеистическую, то есть.
Часто в веб-разработке над одним проектом работает команда людей. Каждый сосредоточен на своей задаче — сделать веб-приложение наилучшим образом. Эти разработчики используют такие программы, как CSS, JavaScript и HTML, а иногда и множество других программ. Каждая программа работает по-своему, и при правильном выполнении вы получаете полностью функционирующее веб-приложение.
Лучший способ описать три программы, которые я упоминал ранее, и то, как они работают вместе, — это взглянуть на автомобиль. Для этой аналогии подойдет любой автомобиль. В этой аналогии мы разбиваем автомобиль на три части: CSS, HTML и JavaScript.
Сначала мы рассмотрим кузов или каркас автомобиля, который будет нашим HTML.
HTML/Body может выглядеть по-разному в зависимости от типа автомобиля или веб-сайта, который вы используете. Возьмем каркас моей Honda Accord и каркас школьного автобуса в сравнении с веб-приложениями Amazon.com и Netflix. Оба автомобиля ездят по дорогам, оба веб-приложения работают в Интернете, но у них разные функции (каламбур, конечно) и используются они по-разному.
Далее — внешний вид автомобиля, начиная от корпуса и заканчивая покраской.
Это не является жизненно важным для правильной работы автомобиля, но, как мы будем говорить позже, внешний вид одинаково важен для всего, что с ним связано.
Далее идет, пожалуй, один из самых важных элементов в веб-разработке — JavaScript или, в данном случае, движок.
Без того и другого веб-сайт, как и автомобиль, — это просто что-то прикольное, на что можно посмотреть. В зависимости от того, что автомобиль будет делать, детали двигателя будут отличаться в зависимости от типа автомобиля. То же самое происходит и с JavaScript. В зависимости от того, что будет делать веб-приложение, в зависимости от того, какие события будут происходить, будут и eventListeners, и список можно продолжать.
В конечном итоге это подводит меня к тому, что я хочу сделать с веб-приложением, которое я создал для себя.
Как вы можете видеть, у меня есть довольно скучная и скучная веб-страница. Я хочу добавить к ней что-то, что облегчит ее восприятие и, по крайней мере, придаст глубину тому, чего я пытаюсь достичь с помощью этого веб-приложения.
Моя цель — добавить слайд-шоу из обложек всех альбомов, которые находятся в моем файле db.json (их 9). Я хочу, чтобы это было по центру и по таймеру. Но прежде чем я перейду к JavaScript и внедрю код, мне нужно указать JS, куда поместить код (HTML) и в каком формате я хочу его видеть (CSS).
В моем HTML-файле внутри
тегов я хочу внедрить тег изображения (), для этого важно дать ему «имя» и установить его в соответствии с тем, что я хочу, чтобы он делал. В данном случае я выбрал «slide». Я разместил его в нижней части тега, потому что хочу, чтобы он отображался внизу страницы.
<img name="slide" class="slidehow-container"/>
Затем я задал CSS для изображения.
img {
display: flex;
width: 400px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
Я указываю, какого размера я хочу видеть слайд-шоу. Здесь можно проявить фантазию, но я выбрал более простой путь.
Теперь начинается JavaScript!
Сначала я задам переменные.
let i = 0;
let images = [];
let time = 4000;
Мы устанавливаем i в ноль (0), чтобы показать, с чего мы хотим начать.
let images = []; устанавливается в пустой массив, так как мы создадим больше файлов для изображений, которые будут в слайд-шоу.
let time = 4000; time — это наш таймер, JavaScript считает в миллисекундах, поэтому установка time = 4000 означает установку на 4 секунды.
Теперь мы зададим массив images и зададим в этом массиве ссылку на изображение, которое мы хотим сделать частью слайд-шоу. Обратите внимание, что URL содержатся в строках ''.
images[0] = 'https://upload.wikimedia.org/wikipedia/en/5/5e/Rhcp1.jpg';
images[1] = 'https://upload.wikimedia.org/wikipedia/en/5/5b/Freakystyleyalbumcover.jpg';
images[2] = 'https://upload.wikimedia.org/wikipedia/en/a/a2/UpliftMofoCover.jpg';
images[3] = 'https://upload.wikimedia.org/wikipedia/en/9/98/Mother%27sMilkAlbumcover.jpg';
images[4] = 'https://upload.wikimedia.org/wikipedia/en/5/5e/RHCP-BSSM.jpg';
images[5] = 'https://upload.wikimedia.org/wikipedia/en/8/8a/Rhcp7.jpg';
images[6] = 'https://upload.wikimedia.org/wikipedia/en/d/df/RedHotChiliPeppersCalifornication.jpg';
images[7] = 'https://upload.wikimedia.org/wikipedia/en/2/23/Rhcp9.jpg';
images[8] = 'https://upload.wikimedia.org/wikipedia/en/e/e6/Stadiumarcadium.jpg';
Теперь, когда у нас есть нужные изображения на слайде и установлена переменная таймера, нам нужно создать функцию, которая будет выполнять слайд-шоу. Для этого нам понадобится оператор if & else, который заставит фотографии меняться каждые 4 секунды, и когда мы дойдем до конца изображений, мы захотим, чтобы слайд-шоу началось заново.
function slideShow(){
document.slide.src = images[i];
if(i < images.length - 1){
i++;
} else{
i = 0
}
setTimeout("slideShow()", time);
}
Если вы похожи на меня, вы потратите слишком много времени на то, чтобы назвать функцию. Я стараюсь использовать метод KISS — Keep It Simple Stupid. Будьте ясны и понятны, чтобы, если другие кодеры прочитают это, они знали, что должна делать функция.
Давайте разберем это!
document.slide.src = images[i];
document. является ссылкой на HTML-страницу, .slide переходит к тегу тег в HTML-документе, src — ссылка на файл в моем VS Code. Короче говоря, эта строка функции проникает в мой HTML-файл, находит
name="slide" и устанавливает его в images[i];. и если вы помните переменные, которые мы установили в начале images[i]; = images[0].
Теперь мы задаем утверждения if & else.
if(i < images.length - 1){
i++;
} else{
i = 0
}
В псевдокоде это утверждение if говорит;
Теперь мы реализуем таймер, вызывая функцию с переменной time, которую нужно установить в начале, как показано ниже;
function slideShow(){
document.slide.src = images[i];
if(i < images.length - 1){
i++;
} else{
i = 0
}
setTimeout("slideShow()", time);
}
Примечание; setTimeout("SlideShow"(), time); все еще находится внутри функции slideShow().
И, наконец, мы хотим, чтобы эта функция загружалась при загрузке страницы, поэтому добавим window.onload = slideShow;. window.onload гарантирует, что эта функция загрузится после загрузки окна.
В совокупности JS-код выглядит следующим образом;
let i = 0;
let images = [];
let time = 4000;
images[0] = 'https://upload.wikimedia.org/wikipedia/en/5/5e/Rhcp1.jpg';
images[1] = 'https://upload.wikimedia.org/wikipedia/en/5/5b/Freakystyleyalbumcover.jpg';
images[2] = 'https://upload.wikimedia.org/wikipedia/en/a/a2/UpliftMofoCover.jpg';
images[3] = 'https://upload.wikimedia.org/wikipedia/en/9/98/Mother%27sMilkAlbumcover.jpg';
images[4] = 'https://upload.wikimedia.org/wikipedia/en/5/5e/RHCP-BSSM.jpg';
images[5] = 'https://upload.wikimedia.org/wikipedia/en/8/8a/Rhcp7.jpg';
images[6] = 'https://upload.wikimedia.org/wikipedia/en/d/df/RedHotChiliPeppersCalifornication.jpg';
images[7] = 'https://upload.wikimedia.org/wikipedia/en/2/23/Rhcp9.jpg';
images[8] = 'https://upload.wikimedia.org/wikipedia/en/e/e6/Stadiumarcadium.jpg';
function slideShow(){
document.slide.src = images[i];
if(i < images.length - 1){
i++;
} else{
i = 0
}
setTimeout("slideShow()", time);
}
window.onload = slideShow;
В итоге мы получаем вот такой результат.
Я знаю, что это не то, что я искал. Но это шаг в правильном направлении!
Надеюсь, вам понравилось,
Райан Баррера