Цифровая вывеска JS
Добавить в избранное
Готовый скрипт "Цифровая вывеска JS" можно использовать как слайдер.
html
Создаём файл index.html с таким содержимым.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
<title>Цифровые вывески JS</title>
<link rel="stylesheet" href="style.css">
<script src="js.js"></script>
</head>
<body>
<!-- слайды -->
<div id="slides"></div>
<!-- MENU ITEMS -->
<div id="menu">
<h1>ТОЛЬКО ПИРОЖКИ</h1>
<ul>
<li>Яблочный пирог $1.10</li>
<li>Банановый пирог $2.20</li>
<li>сырный пирог $3.30</li>
<li>пирог дерби $4.40</li>
<li>Яичный пирог $5.50</li>
<li>Жареный пирог $6.60</li>
</ul>
<div>Напишите «uvuvwevwevwe onyetenyevwe ugwemubwem ossas», чтобы получить скидку 10%!</div>
</div>
</body>
</html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
<title>Цифровые вывески JS</title>
<link rel="stylesheet" href="style.css">
<script src="js.js"></script>
</head>
<body>
<!-- слайды -->
<div id="slides"></div>
<!-- MENU ITEMS -->
<div id="menu">
<h1>ТОЛЬКО ПИРОЖКИ</h1>
<ul>
<li>Яблочный пирог $1.10</li>
<li>Банановый пирог $2.20</li>
<li>сырный пирог $3.30</li>
<li>пирог дерби $4.40</li>
<li>Яичный пирог $5.50</li>
<li>Жареный пирог $6.60</li>
</ul>
<div>Напишите «uvuvwevwevwe onyetenyevwe ugwemubwem ossas», чтобы получить скидку 10%!</div>
</div>
</body>
</html>
js
Создайте файл js.js с таким содержимым.
let sign = {
// ХАРАКТЕРИСТИКИ
swrap: null, // HTML-оболочка слайдов
now: 0, // текущий слайд
all: 2, // общее количество слайдов
slides: [], // html изображения слайдов
delay: 4000, // задержка между каждым слайдом
// INIT
init : () => {
// СЛАЙД-ШОУ
sign.swrap = document.querySelector("#slides");
for (let i=1; i<=sign.all; i++) {
let slide = document.createElement("img");
slide.src = `images/pie-${i}.jpg`;
sign.swrap.appendChild(slide);
sign.slides.push(slide);
}
sign.slides[0].className = "show";
// ПОВЕРНИТЕ СЛАЙДЫ
setInterval(() => {
sign.slides[sign.now].classList.remove("show");
sign.now++;
if (sign.now >= sign.all) { sign.now = 0; }
sign.slides[sign.now].classList.add("show");
}, sign.delay);
// ЕСЛИ РАБОТА ПОДДЕРЖИВАЕТСЯ
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("4-worker.js");
}
}
};
window.onload = sign.init;
// ХАРАКТЕРИСТИКИ
swrap: null, // HTML-оболочка слайдов
now: 0, // текущий слайд
all: 2, // общее количество слайдов
slides: [], // html изображения слайдов
delay: 4000, // задержка между каждым слайдом
// INIT
init : () => {
// СЛАЙД-ШОУ
sign.swrap = document.querySelector("#slides");
for (let i=1; i<=sign.all; i++) {
let slide = document.createElement("img");
slide.src = `images/pie-${i}.jpg`;
sign.swrap.appendChild(slide);
sign.slides.push(slide);
}
sign.slides[0].className = "show";
// ПОВЕРНИТЕ СЛАЙДЫ
setInterval(() => {
sign.slides[sign.now].classList.remove("show");
sign.now++;
if (sign.now >= sign.all) { sign.now = 0; }
sign.slides[sign.now].classList.add("show");
}, sign.delay);
// ЕСЛИ РАБОТА ПОДДЕРЖИВАЕТСЯ
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("4-worker.js");
}
}
};
window.onload = sign.init;
css
Создайте файл style.css с таким содержимым.
/* вся страница */
* {
font-family: "Brush Script MT", cursive;
box-sizing: border-box;
}
body {
display: flex;
padding: 0; margin: 0;
min-height: 100vh;
background: #2e120f;
}
#slides {
width: 60%;
}
#menu {
width: 40%;
}
/* СЛАЙДЫ */
#slides {
position: relative;
}
#slides img {
position: absolute;
top: 0; left: 0;
display: block;
object-fit: cover;
width: 100%; height: 100%;
opacity: 0; visibility: collapse;
transition: opacity 1s;
}
#slides img.show {
opacity: 1; visibility: visible;
}
/* МЕНЮ */
#menu {
padding: 20px;
color: #fff;
}
#menu ul {
padding: 0;
list-style: none;
}
#menu h1 {
font-size: 36px;
}
#menu ul li {
font-size: 20px;
}
* {
font-family: "Brush Script MT", cursive;
box-sizing: border-box;
}
body {
display: flex;
padding: 0; margin: 0;
min-height: 100vh;
background: #2e120f;
}
#slides {
width: 60%;
}
#menu {
width: 40%;
}
/* СЛАЙДЫ */
#slides {
position: relative;
}
#slides img {
position: absolute;
top: 0; left: 0;
display: block;
object-fit: cover;
width: 100%; height: 100%;
opacity: 0; visibility: collapse;
transition: opacity 1s;
}
#slides img.show {
opacity: 1; visibility: visible;
}
/* МЕНЮ */
#menu {
padding: 20px;
color: #fff;
}
#menu ul {
padding: 0;
list-style: none;
}
#menu h1 {
font-size: 36px;
}
#menu ul li {
font-size: 20px;
}
Можете посмотреть и скачать пример:
Посмотреть
Скачать