Показать сообщение отдельно
  #6 (permalink)  
Старый 20.04.2023, 21:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

карусель картинок
Сообщение от samdo
скрипт смены изображений внутри оного div.
<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .tabcontent img {
            display: none;
        }
        .tabcontent img.show {
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <div id="tv1" class="tabcontent">1
            <img src="https://cdn-icons-png.flaticon.com/128/7565/7565883.png" alt="">
            <img src="https://cdn-icons-png.flaticon.com/128/7565/7565461.png" alt="">
        </div>
        <div id="tv2" class="tabcontent">2
            <img src="https://cdn-icons-png.flaticon.com/128/7565/7565883.png" alt="">
            <img src="https://cdn-icons-png.flaticon.com/128/7565/7565461.png" alt="">
        </div>
        <div id="tv3" class="tabcontent">3
            <img src="https://cdn-icons-png.flaticon.com/128/7565/7565883.png" alt="">
            <img src="https://cdn-icons-png.flaticon.com/128/7565/7565461.png" alt="">
        </div>
    </div>
    <script>
        const slideShow = function(container) {
            container.forEach(({
                children
            }) => {
                let len = children.length
                let curImage = len - 1;
                const nextSlide = () => {
                    children[curImage].classList.remove("show");
                    curImage = ++curImage % len;
                    children[curImage].classList.add("show");
                    window.setTimeout(nextSlide, 5000);
                };
                nextSlide()
            })
        };
        const slike = document.querySelectorAll(".tabcontent");
        slideShow(slike);
    </script>
</body>
</html>
Ответить с цитированием