简易轮播图（原生）

我这里是上下滚动

样式：

* {
            margin: 0;
            padding: 0;
        }
        .container {
            margin-top: 50px;
            margin-left: 50px;
            height: 30px;
            width: 300px;
            overflow: hidden;
            position: relative;
            background-color: #f90;
        }
        .container ul {
            position: absolute;
            left: 0;
            top: 0;
            
        }
        .container ul.active {
            transition: top 200ms;
        }
        .container ul li {
            height: 30px;
        }

标签：

<div class="container">
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>1</li>
        </ul>
    </div>

js:

const eUl = document.getElementById('list');
        const length = eUl.children.length;
        let index = 0;

        let timer = setInterval(ding, 2000);

        function ding() {
            index++;
            eUl.style.top = -index * 30 + 'px'; // 30是li的高度 同时也是内容区的高度
            eUl.className = 'active';
            if (index === length - 1) {
                setTimeout(() => {
                    eUl.className = '';
                    eUl.style.top = 0;
                }, 200);  // 200 和 transition的时间保持一致
                index = 0;
            }
        }