Показать сообщение отдельно
  #10 (permalink)  
Старый 03.03.2020, 00:50
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,148

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
    .banners{
       height: 100px;
       width: 200px;
       border: 4px solid #FF4500;
       border-radius: 4px;
       margin: 10px;
    }

    .banners .item{
       display: none;
        height: 100%;
    }
    .banners .item.visible{
       display:  block;
    }
    .banners .item:nth-child(1){
        background-color: #0000FF;
    }
    .banners .item:nth-child(2){
        background-color: #FF0000;
    }
    .banners .item:nth-child(3){
        background-color: #808080;
    }
    .banners .item:nth-child(4){
        background-color: #FFFF00;
    }
    .banners .item:nth-child(5){
        background-color: #FF00FF;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var controlledInterval = function(callback, delay) {
            var args = [].slice.call(arguments, 2);

            var stepsPerLoop = 50,
                loopDelay = delay / stepsPerLoop,
                counter = 0,
                pause = false,
                timeout;

            timeout = setTimeout(function tik() {
                if (!pause) {
                    counter += loopDelay;
                }

                if (counter >= delay) {
                    callback.apply(window, args);

                    counter = 0;
                }

                timeout = setTimeout(tik, loopDelay);
            }, loopDelay);

            return {
                pause: function() {
                    pause = true;
                },
                resume: function() {
                    pause = false;
                },
                destroy: function() {
                    clearTimeout(timeout);
                }
            };
        };

        document.querySelectorAll('.banners').forEach(function(container) {
            var items = container.querySelectorAll('.item'),
                activeItemIndex = -1;

            var showNextItem = function() {
                if (items[activeItemIndex]) {
                    items[activeItemIndex].classList.remove('visible');
                }

                activeItemIndex = ++activeItemIndex % items.length;

                items[activeItemIndex].classList.add('visible');
            };

            showNextItem();

            var interval = controlledInterval(showNextItem, 1000);

            container.addEventListener('mouseenter', interval.pause);
            container.addEventListener('mouseleave', interval.resume);
        });
    });
</script>

</head>
<body>
    <div class="banners">
        <div class="item">01</div>
        <div class="item">02</div>
        <div class="item">03</div>
        <div class="item">04</div>
        <div class="item">05</div>
    </div>
    <div class="banners">
        <div class="item">01</div>
        <div class="item">02</div>
        <div class="item">03</div>
        <div class="item">04</div>
        <div class="item">05</div>
    </div>
    <div class="banners">
        <div class="item">01</div>
        <div class="item">02</div>
        <div class="item">03</div>
        <div class="item">04</div>
        <div class="item">05</div>
    </div>
</body>
</html>
Ответить с цитированием