Простое адаптивное слайд-шоу с помощью HTML CSS JS
Готовое простое и легкое слайд-шоу
slides.html
<html>
<head>
<title>Простое слайд-шоу</title>
<!-- (A) подключаем стили и скрипты -->
<link rel="stylesheet" href="slides.css"/>
<script defer src="slides.js"></script>
</head>
<body>
<!-- (B) СОЗДАЁМ HTML DIV -->
<div id="slidedemo"></div>
<!-- (C) СКРИПТ СО СЛАЙД-ШОУ -->
<script>
window.addEventListener("DOMContentLoaded", () => {
sslide.init({
target: "slidedemo",
images: [
{src: "dove.jpg", cap: "A birb."},
{src: "cat.jpg", cap: "An evil cate."},
{src: "fox.jpg", cap: "Not a doge."}
],
// (ДОПОЛНИТЕЛЬНО) 3 СЕК НА СЛАЙД, УДАЛИТЬ ДЛЯ РУЧНОЙ ПРОКРУТКИ
auto: 3000
});
});
</script>
</body>
</html>
A. Очевидно, загрузите оба slides.css и slides.js.
B. Определите объект <div>, к которому нужно прикрепить слайд-шоу.
C. Наконец, используйте sslide.init() для прикрепления слайд-шоу. Здесь всего 3 варианта:
• targetID <div> элемента, к которому вы хотите прикрепить слайд-шоу.
• images Массив изображений, которые вы хотите показать. Не забудьте указать как исходный путь или URL, так и заголовок.
• auto В миллисекундах, необязательно. будет Автоматически переключаться между слайдами.
ЧАСТЬ 1) ПРЕДВАРИТЕЛЬНАЯ ЗАГРУЗКА ИЗОБРАЖЕНИЙ
slides.js
/* (A) ИНИЦИАЛИЗАЦИЯ - ПРЕДВАРИТЕЛЬНАЯ ЗАГРУЗКА ИЗОБРАЖЕНИЙ */
instances: [],
init: (opt) => {
// (A1) ЗАРЕГИСТРИРОВАТЬ ЭКЗЕМПЛЯР СЛАЙД-ШОУ
const id = sslide.instances.length;
sslide.instances.push(opt);
// (A2) ПРЕДВАРИТЕЛЬНАЯ ЗАГРУЗКА ИЗОБРАЖЕНИЙ
let loaded = 0, ready = () => {
loaded++;
if (loaded == opt.images.length) { sslide.attach(id); }
};
for (let i of opt.images) {
let img = new Image();
img.src = i.src;
img.onload = ready;
}
},
Функция sslide.init() — это то, что мы вызываем для инициализации слайд-шоу.
• (A1) Очень просто, мы помещаем новый экземпляр в sslide.instances массив. Да, нам нужно поддерживать несколько слайд-шоу на одной странице, и это используется для отслеживания того, что есть что-то.
• (A2) Перейдите к следующему шагу, только когда все изображения предварительно загружены.
ЧАСТЬ 2) ПРИСОЕДИНЕНИЕ HTML-ИНТЕРФЕЙСА
slides.js
attach: (id) => {
// (B1) ПОЛУЧИТЬ HTML-КОНТЕЙНЕР
let inst = sslide.instances[id],
sSlide = document.getElementById(inst.target);
// (B2) СЛАЙДШОУ HTML ИНТЕРФЕЙС
let sImg = document.createElement("img"),
sCaption = document.createElement("div"),
sLeft = document.createElement("div"),
sRight = document.createElement("div");
sSlide.className = "sSlide";
sImg.className = "sImg";
sCaption.className = "sCaption";
sLeft.className = "sLeft";
sRight.className = "sRight";
sLeft.innerHTML = "<";
sRight.innerHTML = ">";
sLeft.addEventListener("click", () => { sslide.nav(id, 0); });
sRight.addEventListener("click", () => { sslide.nav(id, 1); });
sSlide.appendChild(sImg);
sSlide.appendChild(sCaption);
sSlide.appendChild(sLeft);
sSlide.appendChild(sRight);
// (B3) ГОТОВО!
inst.current = -1;
inst.sImg = sImg;
inst.sCaption = sCaption;
sslide.nav(id, 1);
},
Ладно, это выглядит безумно. Но все, что он делает, это генерирует следующий HTML:
<div id="slidedemo" class="sSlide">
<div class="sImg"></div>
<div class="sCaption"></div>
<div class="sLeft" onclick="sslide.nav(ID, 0)"><</div>
<div class="sRight" onclick="sslide.nav(ID, 1)">></div>
</div>
ЧАСТЬ 3) ВЫВОД ТЕКУЩИГО СЛАЙДА
slides.js
nav: (id, direction) => {
// (C1) РАССЧИТАТЬ СЛЕДУЮЩИЙ СЛАЙД
let inst = sslide.instances[id],
slides = inst.images;
if (direction) { inst.current++; }
else { inst.current--; }
if (inst.current < 0) { inst.current = slides.length - 1; }
if (inst.current >= slides.length) { inst.current = 0; }
// (C2) ВЫВЕСТИ СЛАЙД
inst.sImg.src = slides[inst.current].src;
inst.sCaption.innerHTML = slides[inst.current].cap;
// (C3) АВТОМАТИЧЕСКИЙ РЕЖИМ ПРОКРУТКИ
if (inst.auto) {
if (inst.timer) { clearInterval(inst.timer); }
inst.timer = setInterval(() => { sslide.nav(id, 1); }, inst.auto);
}
}
};
sslide.nav() срабатывает всякий раз, когда пользователь щелкает влево/вправо. Должно быть довольно понятно.
• Обновляем текущий слайд — inst.current.
• Получите источник изображения и подпись — inst.images[CURRENT].
• Обновите HTML.
• Сбросьте таймер, если это необходимо для автоматической прокрутки.
CSS
slides.css
.sImg, .sCaption {
width: 100%;
}
.sSlide, .sLeft, .sRight {
display: flex;
}
/* (B) КОНТЕЙНЕР */
.sSlide {
flex-wrap: wrap;
position: relative;
max-width: 640px;
}
/* (C) ИЗОБРАЖЕНИЕ */
.sImg {
height: 350px;
object-fit: cover;
/* заполнить, содержать, уменьшить */
}
/* (D) ПОДПИСЬ */
.sCaption {
padding: 10px;
color: red;
background: yellow;
}
/* (E) УПРАВЛЕНИЕ */
/* (E1) КНОПКИ ВЛЕВО/ВПРАВО */
.sLeft, .sRight {
align-items: center;
position: absolute;
top: 0;
z-index: 9;
height: 100%;
padding: 0 20px;
font-size: 2em;
color: yellow;
background: red;
cursor: pointer;
}
.sLeft {
left: 0;
}
.sRight {
right: 0;
}
/* (E2) ПОКАЗЫВАТЬ ТОЛЬКО ПРИ НАВЕДЕНИИ */
.sLeft, .sRight {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.sSlide:hover .sLeft, .sSlide:hover .sRight {
visibility: visible;
opacity: 1;
}
Вы можете посмотреть и скачать скрипт.
Посмотреть
Скачать
