Как создать слайдер изображений или слайд-шоу
Слайдер изображений — это отличный способ отображения различных изображений веб-страницы. Красивые и интересные изображения могут привлечь много посетителей на вашу веб-страницу.
Обычно слайдеры изображений создаются с помощью JavaScript, но с версией CSS3 стало возможно создать слайдеры, используя только CSS3. В этой статье вы научитесь, как можно получить эффект слайд-шоу, сохраняя минимальный код CSS, а во второй части статьи вы узнаете, как создать слайдеры изображений с помощью JavaScript.
Создание слайдеров изображений используя только CSS3
Наверно вы уже видели слайдеры, созданные с помощью JavaScript, которые очень тяжело загружаются. Они замедляют работу веб-страницы, а также могут не работать, если пользователь отключил интерпретацию JavaScript в браузере. Одно из решений этой проблеме — это отказ от их использования, но как же можно создать слайдеры без использования JavaScript? Здесь вы найдете ответ.
Следуйте этим шагам:
- Выберите width и height для слайдов.
- Разместите все ваши слайды рядом друг с другом в одном изображении.
- Установите изображение как background для . Используйте свойство background-position для установления начального положения (0px). Определите, каким должно быть положение для каждого слайда. Должны быть использованы отрицательные числа.
- Установите продолжительность для всего слайд-шоу. Для этого используйте свойство animation-duration.
- Для @keyframes вам придется сделать некоторые вычисления. Используйте (pics * 2) / 100 как умножитель для каждого слайда. «100%» — это последний ключевой кадр (keyframe). Каждое изображение требует несколько ключевых кадров, чтобы приостановить («pause») слайд-шоу на изображении.
Давайте посмотрим как будет выглядеть код:
Пример
html> html> head> title>Слайдер изображений title> style> body < margin:10px auto; text-align:center; > .content < max-width:800px; text-align:left; margin:auto; > .simple-ss < width:800px; height:250px; background-color: #eeeeee; margin:auto; background-image:url("https://imgur.com/download/OtK7XDW"); animation-name: slide; animation-duration: 10s; animation-direction: normal; animation-timing-function: ease; animation-iteration-count: infinite; > @keyframes slide < 0% background-position:0 0;> 16.66% background-position:0 0;> 33.32% background-position:-800px 0;> 49.98% background-position:-800px 0;> 66.64% background-position:-1600px 0;> 83.30% background-position:-1600px 0;> 100% background-position:0 0;> > style> head> body> div class="simple-ss"> div> div class="content"> p>Слайд-шоу без использования Javascript. Он не имеет страниц, кнопок и т. д. p> div> body> html>Смотрите пример, где фоновые изображения действуют как слайдеры:
Пример
html> html> head> title>Слайдер изображений title> style> html, body < width: 100%; height: 100%; margin: 0; padding: 0; font-family: "Helvetica", sans-serif; > img < max-width: 100%; > .slider-container < height: 100%; width: 100%; position: relative; overflow: hidden; text-align: center; > .menu < position: absolute; left: 0; z-index: 900; width: 100%; bottom: 0; > .menu label < cursor: pointer; display: inline-block; width: 16px; height: 16px; background: #fff; border-radius: 50px; margin: 0 0.2em 1em; > .menu label:hover,.menu label:focus < background: #1c87c9; > .slide < width: 100%; height: 100%; position: absolute; top: 0; left: 100%; z-index: 10; padding: 8em 1em 0; background-size: cover; background-position: 50% 50%; transition: left 0s 0.75s; > [id^="slide"]:checked + .slide < left: 0; z-index: 100; transition: left 0.65s ease-out; > .slide-1 < background-image: url("/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg"); > .slide-2 < background-image: url("/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg"); > .slide-3 < background-image: url("/uploads/media/default/0001/03/b87b29b6ca67b64b76651037dc16f5a46e73b42a.jpeg"); > style> head> body> div class="slider-container"> div class="menu"> label for="slide-dot-1"> label> label for="slide-dot-2"> label> label for="slide-dot-3"> label> div> input id="slide-dot-1" type="radio" name="slides" checked> div class="slide slide-1"> div> input id="slide-dot-2" type="radio" name="slides"> div class="slide slide-2"> div> input id="slide-dot-3" type="radio" name="slides"> div class="slide slide-3"> div> div> body> html>Создайте слайды со ссылками для перехода
Слайдер обычно имеет UI для перехода на определенный слайд.
Создайте ссылки для перехода, используя тег привязки . Добавьте стиль и кнопки.
Для плавности перехода слайда на компьютере и мобильном устройстве добавьте свойство scroll-behavior со значением «smooth».
Потом используйте псевдокласс :target для добавления чего-нибудь необычного при активном («active») слайде. Нажатие на одну из навигационных кнопок слайда меняет URL на # hash, и именно тогда :target будет иметь эффект.
Пример
html> html> head> title>Слайдер изображений title> style> * < box-sizing: border-box; > .slider < width: 300px; text-align: center; overflow: hidden; > .slides < display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; > .slides::-webkit-scrollbar < width: 10px; height: 10px; > .slides::-webkit-scrollbar-thumb < background: #666; border-radius: 10px; > .slides::-webkit-scrollbar-track < background: transparent; > .slides > div < scroll-snap-align: start; flex-shrink: 0; width: 300px; height: 300px; margin-right: 50px; border-radius: 10px; background: #eee; transform-origin: center center; transform: scale(1); transition: transform 0.5s; position: relative; display: flex; justify-content: center; align-items: center; font-size: 100px; > .slider > a < display: inline-flex; width: 1.5rem; height: 1.5rem; background: white; text-decoration: none; align-items: center; justify-content: center; border-radius: 50%; margin: 0 0 0.5rem 0; position: relative; > .slider > a:active < top: 1px; color: #1c87c9; > .slider > a:focus < background: #eee; > /* Навигационной кнопки не требуется */ @supports (scroll-snap-type) < .slider > a < display: none; > > html, body < height: 100%; overflow: hidden; > body < display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #1c87c9, #ffcc00); font-family: 'Ropa Sans', sans-serif; > style> head> body> div class="slider"> a href="#slide-1">1 a> a href="#slide-2">2 a> a href="#slide-3">3 a> a href="#slide-4">4 a> a href="#slide-5">5 a> div class="slides"> div id="slide-1">1 div> div id="slide-2">2 div> div id="slide-3">3 div> div id="slide-4">4 div> div id="slide-5">5 div> div> div> body> html>Создание слайд-шоу с помощью CSS и JavaScript
Прежде всего необходимо создать структуру слайдера изображений с помощью HTML и разместить изображения.
После того, как HTML структура для слайдера изображений готова, можно будет использовать CSS стили для интерфейса. Добавьте также стили к изображениям, фонам и т. д. Кроме этого, вам понадобится сделать изображения адаптивными и совместимыми с браузерами, используя CSS свойства.
Сейчас уже можно добавить часть с JavaScript:
Пример
html> html> head> title>Изображения из слайд-шоу title> style> * box-sizing: border-box> body < font-family: Verdana, sans-serif; margin:0> .mySlides display: none> img vertical-align: middle;> .slideshow-container < max-width: 1000px; position: relative; margin: auto; > /* Кнопки next & previous*/ .prev, .next < cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; > /* Измените положение "next button" */ .next < right: 0; border-radius: 3px 0 0 3px; > /* Добавьте черный фоновый цвет с небольшой прозрачностью*/ .prev:hover, .next:hover < background-color: rgba(0,0,0,0.8); > /* Подпись под изображением */ .text < color: #ffffff; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; > /* Number text (1/3 etc) */ .numbertext < color: #ffffff; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; > /* Точки/маркеры/указатели */ .dot < cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #999999; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; > .active, .dot:hover < background-color: #111111; > /* Выцветание анимации */ .fade < -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; > @-webkit-keyframes fade < from opacity: .4> to opacity: 1> > @keyframes fade < from opacity: .4> to opacity: 1> > /* Для маленьких экранов увеличьте размер текста */ @media only screen and (max-width: 300px) < .prev, .next,.text font-size: 11px> > style> head> body> div class="slideshow-container"> div class="mySlides fade"> div class="numbertext">1 / 3 div> img src="/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg" style="width:100%"> div class="text">Лондон, Англия div> div> div class="mySlides fade"> div class="numbertext">2 / 3 div> img src="/uploads/media/default/0001/03/b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg" style="width:100%"> div class="text">Заход солнца в Румынии div> div> div class="mySlides fade"> div class="numbertext">3 / 3 div> img src="/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" style="width:100%"> div class="text">Нью-Йорк, США div> div> a class="prev" onclick="plusSlides(-1)">❮ a> a class="next" onclick="plusSlides(1)">❯ a> div> br> div style="text-align:center"> span class="dot" onclick="currentSlide(1)"> span> span class="dot" onclick="currentSlide(2)"> span> span class="dot" onclick="currentSlide(3)"> span> div> script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) < showSlides(slideIndex += n); > function currentSlide(n) < showSlides(slideIndex = n); > function showSlides(n) < var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) 1> if (n < 1) length> for (i = 0; i < slides.length; i++) < slides[i].style.display = "none"; > for (i = 0; i < dots.length; i++) < dots[i].className = dots[i].className.replace(" active", ""); > slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; > script> body> html>Для создания автоматического слайд-шоу используйте следующий код:
Пример
html> html> head> title>Изображения из слайд-шоу title> style> * box-sizing: border-box> body < font-family: Verdana, sans-serif; margin:0 > .mySlides display: none> img vertical-align: middle;> .slideshow-container < max-width: 1000px; position: relative; margin: auto; > /* Кнопки next & previous */ .prev, .next < cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; > /* Измените положение "next button" */ .next < right: 0; border-radius: 3px 0 0 3px; > /* Добавьте черный фоновый цвет с небольшой прозрачностью */ .prev:hover, .next:hover < background-color: rgba(0,0,0,0.8); > /* Подпись под изображением */ .text < color: #ffffff; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; > /* Number text (1/3 etc) */ .numbertext < color: #ffffff; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; > /* Точки/маркеры/указатели */ .dot < cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #999999; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; > .active, .dot:hover < background-color: #111111; > /* Выцветание анимации */ .fade < -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; > @-webkit-keyframes fade < from opacity: .4> to opacity: 1> > @keyframes fade < from opacity: .4> to opacity: 1> > /* Для маленьких экранов увеличьте размер текста */ @media only screen and (max-width: 300px) < .prev, .next,.text font-size: 11px> > style> head> body> div class="slideshow-container"> div class="mySlides fade"> div class="numbertext">1 / 3 div> img src="/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg" style="width:100%"> div class="text">Лондон, Англия div> div> div class="mySlides fade"> div class="numbertext">2 / 3 div> img src="/uploads/media/default/0001/03/b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg" style="width:100%"> div class="text">Заход солнца в Румынии div> div> div class="mySlides fade"> div class="numbertext">3 / 3 div> img src="/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" style="width:100%"> div class="text">Нью-Йорк, США div> div> a class="prev" onclick="plusSlides(-1)">❮ a> a class="next" onclick="plusSlides(1)">❯ a> div> br> div style="text-align:center"> span class="dot" onclick="currentSlide(1)"> span> span class="dot" onclick="currentSlide(2)"> span> span class="dot" onclick="currentSlide(3)"> span> div> script> var slideIndex = 0; showSlides(); function showSlides( ) < var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) < slides[i].style.display = "none"; > slideIndex++; if (slideIndex > slides.length) 1> slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 2000); // Change image every 2 seconds > script> body> html>Слайдер на CSS
Хочу рассказать простой способ создания слайдера, без использования JS, при помощи анимации CSS.
1) Для начала напишем HTML, предположим что в слайдере будут сменять друг друга 4 изображения.
2) Далее оформим размеры блока, и еще несколько настроек, position: relative необходимо для того, чтобы создать контекст форматирования, дальше будет понятно зачем.
.slider
3) Также определим некоторые свойства для самих слайдов:
.slide
Как видно из CSS мы размещаем все слайды в верхнем левом углу слайдера, задавая, таким образом, одинаковую исходную позицию.
4) Далее нужно определить каким именно образом слайды будут сменять друг друга, не создавая разрывов – для каждого слайда я решил использовать следующую последовательность действий:
1. Слайд находится на исходной позиции, демонстрируется пользователю
2. Слайд двигается влево, пока полностью не выйдет за границу слайдера (у слайдера же, как выше указано, overflow: hidden, соответственно слайд не наезжает на окружающие объекты).
3. Далее слайд двигается наверх, пока нижняя граница слайда выйдет за верхнюю границу слайдера
4. Далее слайд двигается вправо, пока левая граница слайда, не выйдет за правую границу слайдера
5. Слайд спускается вниз на один уровень со слайдером
6. Слайд двигается на исходную позицию
Иначе говоря (кадры пока назову согласно номерам из списка выше):
@keyframes slide < from < top: 0; left: 0; >1 < transform: translate(0px, 0px); >2 < transform: translate(-500px, 0); >3 < transform: translate(-500px, 300px); >4 < transform: translate(500px, 300px); >5 < transform: translate(500px, 0); >to < transform: (0px, 0px); >> 5) Итак, стало понятно, как выглядит траектория слайда. Каждый слайд «объезжает» вокруг своего контейнера – слайдера – и возвращается на исходную. Таким образом мы можем бесконечно крутить любое количество слайдов. Но остался один нюанс, который является самым важным в этой схеме – время. Нужно правильно рассчитать раскадровку анимации по времени и установить правильную задержку для каждого слайда, чтобы не все одновременно ринулись анимироваться. Для того чтобы понять, как правильно выставит задержку и рассчитать время анимации, я пошел нижеописанным путем.
Давайте возьмем обозначения шагов из предыдущего пункта и разберемся что же происходит в каждом шаге. По сути, шаги №1, 2 и 6 – это те шаги, в которых слайд заходит в видимую область. Из того, что слайды должны двигаться неразрывно и, как бы, выталкивать друг друга из слайдера, можно заключить, что длительность шагов 2 и 6 должна быть равна. Сразу оговорюсь, что мне удалось удачно работать эту конструкцию только при том условии, что длительность первого шага также равна длительности 2-го и 6-го. То, что происходит во время шагов 3,4 и 5 – по сути, технические нужды, и для простоты, давайте объединим эти три шага в 1.
После упрощения имеем:
1. Шаг – слайдер демонстрируется на исходной
2. Шаг – слайдер сдвигается вправо
3. Шаг – слайдер совершает технические перемещения
4. Шаг – слайдер сдвигается влево, возвращаясь на исходную позицию
Для обеспечения безразрывного показа слайдов, в момент, когда слайд приступает к шагу 2, следующий слайд должен приступить к шагу 4.
Для того чтобы посчитать процент необходимого времени на каждую стадию, так сказать, вывел небольшую формулу, которая работает при условии, что 1,2 и 4 шаг равны.
Если время, на круг всей анимации – t;
Кол-во слайдов – n;
Длительность 3 шага – y;
Длительность шагов 1,2 и 4 – x;
Шаг задержки анимации для n-слайда – z;
То:
y = (100 * n — 150)/n;
x = (100 – y) / 3;
x и y необходимо перевести в проценты, и тогда:
z = 2 * x * t;
Для случая, когда n = 4, как в примере выше, получаем:
3-ий шаг – 62,5%, 1, 2 и 4-ый — по 12,5%. Шаг задержки анимации для каждого последующего слайда – 25%.
Какие интервалы будут между этапами внутри третьего шага – не имеет значения.
6) Теперь, когда мы все посчитали и знаем все величины можно привести финальный код.
@keyframes slide < from < top: 0; left: 0; >12.5% < transform: translate(0px, 0px); >25% < transform: translate(-500px, 0); >36% < transform: translate(-500px, 300px); >37% < transform: translate(500px, 300px); >87.5% < transform: translate(500px, 0); >to < transform: (0px, 0px); >> .slide1 < background: url(1.jpg); animation-delay: 7.5s; >.slide2 < background: url(2.jpg); animation-delay: 5s; >.slide3 < background: url(3.jpg); animation-delay: 2.5s; >.slide4
Общий CSS для всех слайдов:
Как сделать простой слайдер на HTML и JavaScript
Вы сверстали сайт и сделали его красивым с помощью CSS. Осталось добавить интерактива, и можно добавлять проект в портфолио.
«Оживить» на сайте можно что угодно: меню, модальные окна, корзину, пагинацию… В этой статье мы разберём слайдер — посмотрим, как его сделать на чистом JavaScript. Слайдер пригодится для раздела с отзывами, фотографиями сотрудников, изображениями товаров или чего-нибудь ещё — всё зависит только от вашей фантазии и проекта.
☝ Мы покажем лишь один из возможных вариантов. Это не эталонное решение, да в разработке и не бывает единственно верного способа решить задачу. Но код точно работает, поэтому можете скопировать его в свой проект.
Пример простого слайдера на чистом JavaScript
See the Pen Untitled by Feizerr (@feizerr) on CodePen.
Что здесь происходит
- Мы ищем в HTML-разметке контейнер слайдера, кнопки и изображения. Записываем всё в переменные.
- Находим общее количество слайдов. Затем создаём переменную slideIndex и делаем её равной 0 — это индекс активного слайда
- Добавляем обработчики событий на кнопки, чтобы реагировать на клики пользователя.
- Когда пользователь нажимает на кнопку .prev-button , мы переключаемся на предыдущий слайд (если текущий слайд не первый) и обновляем отображение слайдера.
- Когда пользователь нажимает на кнопку .next-button , переключаемся на следующий слайд (если текущий слайд не последний) и обновляем отображение слайдера.
- Функция updateSlider() обновляет отображение слайдера, показывая только текущий слайд и скрывая остальные.
- При загрузке страницы мы вызываем updateSlider() , чтобы отобразить первый слайд и настроить слайдер для начала работы.
Этот код можно бесконечно менять и дорабатывать: настроить анимацию, удалить зацикливание или сделать слайдер адаптивным. Или можно использовать наш пример, чтобы понять, как работает слайдер, а затем написать свой код — ещё проще и чище.
Популярные библиотеки для слайдеров
Если слайдер нужен здесь и сейчас, но писать с нуля не хочется, а пример выше не подходит — используйте библиотеки.
Slick
Гибкая библиотека для адаптивных слайдеров. Здесь можно настроить показ одного или нескольких слайдов, включить автоматическое переключение и задать скорость смены слайдов, подключить ленивую загрузку, настроить стрелки и пагинацию.
Swiper
«Самый современный мобильный сенсорный слайдер» — так разработчики говорят о своей библиотеке. В ней есть плавные переходы, 3D-анимации, автоматическое переключение слайдов, пагинация и навигация. А ещё здесь гибкие макеты: можно размещать слайды в несколько строк, добавлять несколько слайдов в столбец, управлять расстояниями между слайдами.
Owl Carousel
Простая в использовании библиотека, подойдёт даже новичкам. Она поддерживает различные переходы и анимации, есть настройки для автоматического переключения слайдов и пагинация.
Glide.js
Легковесная и быстрая библиотека: со всеми функциями она весит всего 28 КБ (8 КБ в сжатом виде). При этом подключать всё необязательно — лишние модули можно удалить, и тогда она станет ещё легче.
Параметров много. Можно настроить автоматическую прокрутку, добавить анимации, указать минимальное расстояние для смены слайда, включить зацикливание… Почти всё то же, что и в других библиотеках.
Какую из библиотек использовать — решать вам. У каждой понятная документация с примерами кода, вы точно разберётесь, как создать слайдер. И у всех гибкие настройки. Поэтому попробуйте поработать с каждой библиотекой или просто посмотрите примеры и выберите ту, что больше нравится и подходит вам.
�� Чтобы делать слайдеры любой сложности и вообще что угодно в вебе, приходите на профессию «JavaScript-разработчик».
Материалы по теме
- Стоит ли делать слайдеры на CSS
- 9 книг по JavaScript для начинающих
- Как работают колбэки в JavaScript
- Как составлять регулярные выражения
- Как сделать список задач с drag & drop
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Генерация QR-кодов на JS в 4 шага. Node.js + qrcode
Сегодня сделаем простой REST API на Node.js и Express, который будет генерировать QR-коды для любой ссылки. Если у вас ещё не установлены Node.js и npm , установите их с официального сайта.
- 22 ноября 2023
ChatGPT не справляется
Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.
- 2 ноября 2023
Знакомство с JavaScript
Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.
Что такое JavaScript?
JavaScript — это язык сценариев, который позволяет вам создавать динамически обновляемый контент, управлять мультимедиа, анимировать изображения и многое другое. Почти все современные веб-сайты используют JavaScript для улучшения пользовательского опыта.
Подключение JavaScript к веб-странице
Вы можете добавить JavaScript в ваш HTML-документ двумя способами:
Встроенный JavaScript: непосредственно в HTML-документ, в тегах :
Внешний JavaScript: подключение внешнего .js файла к HTML-документу:
Основы синтаксиса JavaScript
JavaScript состоит из инструкций, которые выполняются компьютером. Вот пример простого синтаксиса:
var message = "Привет, мир!"; alert(message); Переменные
Переменные в JavaScript — это контейнеры для хранения данных. Вы можете думать о них как о ящиках, на которых есть имена. Переменные объявляются с помощью ключевых слов var , let и const .
var name = "Алиса"; // Старый способ объявления переменной let age = 25; // Современный способ объявления переменной const pi = 3.14; // Константа, значение которой нельзя изменить Функции
Функции — это блоки кода, предназначенные для выполнения конкретной задачи. Они могут принимать параметры и возвращать значение.
function sayHello(name) < alert("Привет, " + name); >sayHello("Мир"); События
События в JavaScript позволяют реагировать на действия пользователя. Например, клик мыши или нажатие клавиши.
document.getElementById("myButton").onclick = function() < alert("Кнопка была нажата!"); >; Условия и циклы
JavaScript также поддерживает условные операторы и циклы для управления потоком выполнения кода.
if (age > 18) < alert("Вы совершеннолетний!"); >else < alert("Вы ещё не совершеннолетний!"); >for (let i = 0; i
Объекты и массивы
Объекты представляют собой коллекции данных, а массивы позволяют хранить упорядоченные коллекции данных.
let person = < name: "Джон", age: 30 >; let numbers = [1, 2, 3, 4, 5]; Отметим, что JavaScript не просто добавляет интерактивность к вашим веб-страницам, он также вносит логику и динамичность в ваш сайт. И вот почему это возможно.
Объекты Document Object Model (DOM)
DOM (объектная модель документа) — описывает структуру документа и позволяет программам изменять структуру, стиль и содержание веб-страниц. JavaScript может использовать DOM для манипуляции элементами и атрибутами.
document.getElementById("demo").innerHTML = "Привет, DOM!"; Обработка событий
События играют ключевую роль в интерактивности веб-сайтов. JavaScript может отслеживать действия пользователя, такие как клики мышью, нажатия клавиш, перемещения мыши и многие другие.
document.getElementById("myButton").addEventListener("click", function() < alert("Кнопка нажата!"); >); JSON (JavaScript Object Notation)
JSON — это формат обмена данными, легко читаемый как людьми, так и машинами. В JavaScript вы можете легко преобразовывать объекты в JSON и обратно.
let jsonObject = JSON.stringify(< name: "Джон", age: 30 >); let jsObject = JSON.parse(jsonObject); Асинхронность
JavaScript часто используется для асинхронных операций, таких как загрузка данных из интернета без перезагрузки страницы. Промисы и асинхронные функции ( async/await ) являются современными способами работы с асинхронным кодом.
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); Замыкания
Замыкания позволяют функции доступ к переменным из области, в которой она была создана, даже после того как эта область перестала существовать. Это мощная концепция в JavaScript для управления приватностью и состоянием.
function createCounter() < let count = 0; return function() < count += 1; return count; >; > const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 Современный синтаксис ES6+
Современный JavaScript включает множество улучшений синтаксиса и новых возможностей, таких как стрелочные функции, классы, шаблонные строки и деструктуризация.
// Стрелочная функция const greet = name => `Привет, $!`; // Класс class Person < constructor(name) < this.name = name; >sayHello() < return `Привет, $!`; > > // Деструктуризация const < name, age >= < name: "Джон", age: 30 >; Подводя итог, JavaScript — это только начало вашего путешествия в создание интерактивных веб-сайтов. Продолжайте изучать и экспериментировать, и вскоре вы сможете создавать сложные веб-приложения.
В следующих статьях мы углубимся в различные аспекты JavaScript, включая современный синтаксис ES6+, асинхронное программирование и работу с фреймворками, такими как React или Vue.
- 1 ноября 2023
Событие onclick в JS на примерах
Интерактивность — ключевой компонент любого современного сайта. И одним из наиболее часто используемых событий для создания интерактивности является событие onclick . В этой статье мы подробно разберёмся, что такое событие onclick , как его использовать и приведем примеры применения.
Событие onclick — это событие JavaScript, которое активируется, когда пользователь кликает на определенный элемент страницы. Это может быть кнопка, ссылка, изображение или любой другой элемент, на который можно нажать.
- 30 октября 2023
Как перевернуть сайт. Самая короткая инструкция
Не представляем, зачем это может понадобиться, но не могли пройти мимо.
Никакой магии. Мы вызываем JavaScript-функцию rotateBody() , которая применяет свойство transform с значением rotate(180deg) к элементу . Когда вы нажмете на кнопку «Перевернуть», всё, что находится внутри будет повернуто на 180 градусов (то есть, встанет вниз головой)
function rotateBody() < document.body.style.transform = 'rotate(180deg)'; > Но такой код повернёт страницу только один раз. Если нужно, чтобы она возвращалась обратно при втором клике, усложним код:
let isRotated = false; function rotateBody() < if (isRotated) < document.body.style.transform = 'rotate(0deg)'; document.body.style.direction = "ltr"; >else < document.body.style.transform = 'rotate(180deg)'; document.body.style.direction = "rtl"; >isRotated = !isRotated; > Надеемся, вы прочитали это описание до того, как нажать на кнопку.
- 25 октября 2023
Как узнать геолокацию: Geolocation API
Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.
Основной метод Geolocation API — getCurrentPosition() , но есть и другие методы и свойства, которые могут пригодиться.
- 16 октября 2023
Что такое localStorage и как им пользоваться
localStorage — это место в браузере пользователя, в котором сайты могут сохранять разные данные. Это как ящик для хранения вещей, которые не исчезнут, даже если вы выключите компьютер или закроете браузер.
До localStorage разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.
- 12 октября 2023
Случайное число из диапазона
Допустим, вам зачем-то нужно целое случайное число от min до max . Вот сниппет, который поможет:
function getRandomInRange(min, max)
- Math.random () генерирует случайное число между 0 и 1. Например, нам выпало число 0.54 .
- (max — min + 1): определяет количество возможных значений в заданном диапазоне. 10 — 0 + 1 = 11 . Это значит, что у нас есть 11 возможных значений (0, 1, 2, . 10).
- Math.random () * (max — min + 1): умножает случайное число на количество возможных значений: 0.54 * 11 = 5.94 .
- Math.floor (): округляет число вниз до ближайшего целого. Так, Math.floor(5.94) = 5 .
- . + min: смещает диапазон так, чтобы минимальное значение соответствовало min . Но в нашем примере, так как min = 0 , это не изменит результат. Пример: 5 + 0 = 5 .
- Итак, в нашем примере получилось случайное число 5 из диапазона от 0 до 10.
Чтобы протестировать, запустите:
console.log(getRandomInRange(1, 10)); // Тест - 7 сентября 2023
В чём разница между var и let
Если вы недавно пишете на JavaScript, то наверняка задавались вопросом, чем отличаются var и let , и что выбрать в каждом случае. Объясняем.
var и let — это просто два способа объявить переменную. Вот так:
var x = 10; let y = 20; Переменная, объявленная через var , доступна только внутри «своей» функции, или глобально, если она была объявлена вне функции.
function myFunction() < var z = 30; console.log(z); // 30 >myFunction(); console.log(z); // ReferenceError Это может создавать неожиданные ситуации. Допустим, вы создаёте цикл в функции и хотите, чтобы переменная i осталась в этой функции. Если вы используете var , эта переменная «утечёт» за пределы цикла и будет доступна во всей функции.
Переменные, объявленные с помощью let доступны только в пределах блока кода, в котором они были объявлены.
if (true) < let a = 40; console.log(a); // 40 >console.log(a); // ReferenceError В JavaScript блок кода — это участок кода, заключённый в фигурные скобки <> . Это может быть цикл, код в условном операторе или что-нибудь ещё.
if (true) < let blockScoped = "Я виден только здесь"; console.log(blockScoped); // "Я виден только здесь" >// здесь переменная blockScoped недоступна console.log(blockScoped); // ReferenceError Если переменная j объявлена в цикле с let , она останется только в этом цикле, и попытка обратиться к ней за его пределами вызовет ошибку.
- 30 августа 2023
Быстрый гайд по if, else, else if в JavaScript
Допустим, вы собираетесь идти на прогулку. Если на улице солнечно, вы возьмёте с собой солнечные очки.
Это можно описать с помощью оператора if .
let weather = "sunny"; if (weather === "sunny")
А если погода не солнечная, а, скажем, дождливая, вы возьмете зонт.
Этот сценарий можно описать с помощью if-else .
let weather = "rainy"; if (weather === "sunny") < console.log("Возьму солнечные очки"); >else
Условный оператор if-else if-else
Теперь представим, что у вас есть несколько вариантов транспорта для дороги на работу: машина, велосипед, общественный транспорт. Выбор будет зависеть от различных условий, например, погоды и времени суток. Логично, что в дождь безопаснее ехать на автобусе, а в хорошую погоду можно прокатиться на машине или велосипеде, если утро и пробки. То есть схема такая:
И всё это очень легко описывается кодом:
let weather = "sunny"; let time = "morning"; if (weather === "rainy") < // если дождь, то только так console.log("Еду на автобусе"); >else if (time === "morning") < // если не дождь и утро console.log("Еду на велике мимо пробок"); >else < // если второе не дождь и не утро console.log("Еду на машине"); >Ветвление только может показаться сложным, но вообще оно очень логичное, если понять, какие действия после каких условий выполняются. Разберитесь один раз и поймёте на всю жизнь, 100%.
- 30 августа 2023
Как сделать слайдер на сайте html css
Один из самых простых способов для создания слайдера на html и css — это использование стандартного CSS свойства scroll-snap-type в сочетании с scroll-snap-align .
Для этого нужно создать контейнер, в котором будут располагаться слайды, и задать ему свойство scroll-snap-type: x mandatory; , чтобы горизонтальный скролл происходил с определенным шагом. Затем для каждого слайда нужно задать свойство scroll-snap-align: start; , чтобы они выравнивались по левому краю контейнера.
06 апреля 2023
.container display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; width: 300px; -webkit-overflow-scrolling: touch; /* для плавной прокрутки на мобильных устройствах */ > Правило scroll-snap-type: x mandatory указывает, что прокрутка должна происходить только по горизонтали, а элементы должны привязываться к точкам привязки, заданным в этом направлении. Правило overflow-x: scroll задаёт горизонтальную прокрутку.
Далее, необходимо задать точки привязки для элементов слайдера, для этого используется свойство scroll-snap-align :
.slide flex: none; scroll-snap-align: start; width: 300px; text-align: center; > Правило scroll-snap-align: start указывает, что элемент должен привязываться к началу контейнера при прокрутке.
class="container"> class="slide">Первый слайд class="slide">Второй слайд class="slide">Третий слайд Таким образом, при прокрутке контейнера элементы будут переключаться по одному, в соответствии с заданными точками привязки.