js-浮动切换

    <style>
        div {
            width: 200px;
            height: 30px;
            line-height: 30px;
            margin-top: 100px;
            border: 1px red solid;
            overflow: hidden;
            position: relative;
        }

        ul {
            margin-top: -3px;
            list-style: none;
            cursor: pointer;
            position: absolute;
        }
    </style>

    <div>
        <ul>
            <li>1.每时每刻给你新机会</li>
            <li>2.HTML更新网页内容</li>
            <li>3.你好，欢迎来到js</li>
            <li>4.前端是很有意思的</li>
        </ul>
    </div>
    <script>
        //给父子盒子定位 这样子盒子距离父盒子的上边距就是0
        //此时 只需要给子盒子每隔一段时间就往上走一定的距离

        var input = document.querySelectorAll("li");
        var myul = document.querySelector("ul");
        let top1 = 0
        function go() {
            top1 += 30
            if (top1 > 30 * (input.length - 1)) top1 = 0
            myul.style.top = -top1 + 'px'
        }
        setInterval(go, 800)
    </script>