Содержание
Хотите узнать новый трюк для пользовательского интерфейса? Вот как сделать анимацию смены изображения (или как вы это назовете), используя только JS! Все, что нам нужно, - это несколько URL-адресов изображений, функции и специальная операция. Сначала я быстро расскажу про HTML и CSS, а затем по частям объясню Javascript, чтобы вы могли понять и использовать этот код в своих собственных проектах (для этого потребуется немного разобраться в divison).
HTML & CSS
Если вы хотите следовать за мной, сначала в HTML создайте прямоугольник div с большой высотой, но короткой шириной. Я сделал его такого размера, так как большинство изображений, которые я получил (которые были из Unsplash), были такого размера. Затем я задал div background-size для cover, чтобы обеспечить соответствие изображений, которые я ему дал. Наконец, я задал для html и body width и height в 100%, чтобы можно было использовать flex для body, чтобы отцентрировать его.
HTML
<html>
<body>
<div class="box">
</body>
</html>
CSS
html, body { width: 100%; высота: 100%; } /_центрирование бокса_/ тело { display: flex; align-items:
center; justify-content: center; } .box { ширина: 200px; высота: 350px; /_убедившись, что
изображения поместятся внутри_/ background-size: cover; }
Если я сделал так, то это не значит, что вы не можете сделать по-своему!
Сбор URL-адресов изображений
Теперь о JS, сначала мы собираем поле с помощью querySelector(), затем сохраняем его в переменной. Затем мы создаем массив, заполненный URL-адресами изображений по нашему выбору. И наконец, мы создаем переменную urlArrayLength, которая хранит длину массива url.
var box = document.querySelector('.box');
var imageUrls = [
'https://images.unsplash.com/photo-1693305911839-ec783e3145d6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80',
'https://images.unsplash.com/photo-1692821565372-15f7219ede0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80',
'https://images.unsplash.com/photo-1692175033119-8e2224157199?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80',
'https://images.unsplash.com/photo-1692283578489-ee4cfffa3ae1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80',
'https://images.unsplash.com/photo-1587336477546-bb3a2a7887fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80',
];
var urlArrayLength = imageUrls.length; //получает длину массива
Функции изменения изображений
После создания массива и переменных теперь создадим функцию imageChange(). В ней сначала будет переменная index с начальным значением 0. Эта переменная важна, потому что она представляет, какое изображение мы выбираем в urlArray. Теперь мы создадим функцию внутри функции imageChange() под названием newImage(), которая будет использоваться для постоянного выбора следующего изображения для показа.
function ImageChange() {
//Используется как индексный номер изображения, которое мы будем выбирать
let index = 0;
function newImage() {}
}
Теперь внутри функции смены изображения мы напишем код, чтобы фоновое изображение бокса было установлено на изображение url с индексом, равным нашей переменной index. Для этого мы напишем box.style.backgroundImage и установим его на url в urlArray, индекс которого совпадает с переменной index.
function ImageChange() {
//Используется как индексный номер изображения, которое мы выберем
let index = 0;
function newImage() {
//Фоновое изображение бокса будет установлено на url изображения с этим индексом
box.style.backgroundImage = 'url(' + imageUrls[index] + ')';
}
}
Быстрое понимание оператора остатка
Если вы хорошо понимаете, что делает это напоминание, то можете пропустить этот раздел, если нет, то этот раздел предназначен для объяснения. Оператор остатка % - это то же самое, что и обычное целочисленное деление, за исключением того, что вы получаете остаток. Допустим, при делении 13%3 вы получите остаток 1 (Примечание: оператор использует целочисленное деление, в отличие от калькулятора или оператора деления /, который использует деление с плавающей точкой, это похоже на длинное деление).
//оператор остатка
console.log(13 % 3); //результат: 1
//оператор деления
console.log(13 / 3); //результат: 4.333...
Разработчики используют этот оператор для проверки четных и нечетных чисел, обертывания или зацикливания значений, а также для цикличности массивов, для чего мы его и используем!
Циклирование массива
Теперь, чтобы сделать так, чтобы он переключал изображения, мы изменим переменную index и прибавим к ней единицу, но после этого разделим сумму с помощью оператора остатка % на длину массива url! Теперь индекс будет увеличиваться на 1 каждый раз, но как только он достигнет последнего номера массива, он вернется к 0. Например, если у нас есть массив изображений с пятью значениями, мы напишем index = (index + 1) % arrayLength и сразу после того, как он достигнет последнего номера индекса, он выполнит деление 5%5, давая переменной index значение 0 (потому что 5 деленное на 5 дает остаток 0!). Этот метод в программировании называется цикличностью массива, и его лучше всего использовать вместе с оператором остатка.
function ImageChange() {
let index = 0;
function newImage() {
//фоновое изображение бокса будет установлено на url изображения с этим индексом
box.style.backgroundImage = 'url(' + imageUrls[index] + ')';
//По прошествии некоторого времени индекс увеличится на единицу и выберет следующий url, но если индекс = длине imageUrls[], то он вернется к первому индексу
index = (index + 1) % urlArrayLength;
}
}
Вызов функций!
Теперь нам осталось только вызвать обе функции! Внутри нашей функции imageChange() мы используем setInterval(), чтобы заставить нашу функцию newImage() повторяться через определенный промежуток времени, мы возьмем 200 мс, поэтому напишем код setInterval(NewImage, 200). После этого нам останется только вызвать функцию imageChange() ниже!
function ImageChange() {
let index = 0;
function newImage() {
box.style.backgroundImage = 'url(' + imageUrls[index] + ')';
index = (index + 1) % urlArrayLength;
}
//устанавливает количество времени до выбора следующего индекса
setInterval(newImage, 200);
}
ImageChange();
Заключение
Извините, если этот блог показался вам длинным, я просто хотел описать его, так как знаю, что некоторые люди, которые читают мои посты, не знают многого о Javascript. Надеюсь, вы запомните это и будете использовать в своих последующих проектах, таких как целевые страницы или галереи изображений. Будет здорово увидеть больше уникальности в UI! Если у вас есть вопросы или вы хотите сказать что-то в целом, просто комментируйте или пишите мне, хорошего дня/ночи 👋.