Последние записи

made in programmersforum 7

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

26th
Июн

Смена картинки через время

Posted by maloy under JavaScript

Pearl

Здравствуйте! Мне нужно сделать на сайте плавную смену картинок через определенное время. Нашел в интернете код смены картинок, но в нем не реализовано никакой плавности.

У меня есть следующий скрипт:

Код HTML:


<img src="/images/fon.jpg" class="promo-img" id="image_id" />
<script>

var images  = ['/images/fon.jpg', '/images/fon1.jpg', '/images/fon2.jpg', '/images/fon3.jpg'],
    length  = images.length,
    index   = 1;

setInterval(function() {
    if(index == length) index = 0;
    document.getElementById('image_id').src = images[index++];
}, 4000);
</script>

Как можно сделать так, чтобы картинки менялись плавно?

Ale}{ander

Код:


var img1 = document.getElementById('старая картинка');
var img2 = document.getElementById('новая картинка');

img1.style.opacity = '0';
img2.style.opacity = '1';

CSS

Код:


#картинка
{
opacity: 0;
transition: 2s;
}

тема на форуме

Купить рекламу на сайте за 1000 руб
пишите сюда - alarforum@yandex.ru

Да и по любым другим вопросам пишите на почту

пеллетные котлы

Пеллетный котел Emtas

Наши форумы по программированию:

Последние записи

made in programmersforum 7

Смена картинки через время

Похожие статьи

Купить рекламу на сайте за 1000 руб

пишите сюда - alarforum@yandex.ru