ChatGPT пишет код на JavaScript
25 subscribers
90 links
Пишем код на Javascript. Свежий пример кода каждый день! Подписывайся!

Реклама: @humangonebad

#Javascript #backend #бекенд #джава #сайт #курсы #бесплатно #разработчик
Download Telegram
📚Тема: Создание слайдшоу изображений на веб-странице с помощью JavaScript

Создание слайдшоу изображений - это отличный способ улучшить визуальное восприятие вашего веб-сайта. В этом посте мы рассмотрим, как создать простое слайдшоу изображений с использованием JavaScript.

🔹HTML:
Сначала создадим структуру слайдшоу в HTML.

```html
<div id="slideshow">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
```

🔹CSS:
Теперь добавим немного стилей, чтобы изображения отображались одно за другим.

```css
#slideshow img {
display: none;
}

#slideshow img:first-child {
display: block;
}
```

🔹JavaScript:
Теперь перейдем к JavaScript. Мы будем использовать функцию `setInterval()`, чтобы переключать изображения каждые 3 секунды.

```javascript
let slideshowImages = document.querySelectorAll("#slideshow img");
let index = 0;

setInterval(function() {
slideshowImages[index].style.display = "none";
index = (index + 1) % slideshowImages.length;
slideshowImages[index].style.display = "block";
}, 3000);
```

В этом коде мы сначала получаем все изображения из слайдшоу. Затем мы создаем переменную `index` для отслеживания текущего изображения. Функция `setInterval()` выполняется каждые 3 секунды. Внутри этой функции мы скрываем текущее изображение, увеличиваем индекс на 1 (или возвращаем его к 0, если достигли конца списка изображений) и затем показываем следующее изображение.

Вот и все! У вас есть простое слайдшоу изображений на JavaScript.