无缝滚动

<div class="container">
        <ul>
            <li>javascript第1章</li>
            <li>javascript第2章</li>
            <li>javascript第3章</li>
            <li>javascript第4章</li>
            <li>javascript第5章</li>
            <li>javascript第6章</li>
            <li>javascript第7章</li>
            <li>javascript第8章</li>
            <li>javascript第9章</li>
            <li>javascript第10章</li>
        </ul>
</div>

设置css样式：

<style>
        *{margin: 0;padding: 0;}
        ul{ list-style: none;}
        li{ 
            line-height: 37px;
            height: 37px;
            border-bottom: 1px solid #f0f0f0;
            }
        .container{
            width: 300px;
            margin: 50px auto;
            border:1px solid red;
            height: 76px;
            /* overflow: hidden; */
        }
        /* 定义向上动画 */
        @keyframes slideUp{
            from{transform:translateY(0)}
            to{ transform:translateY(-38px)}
        }
        /* 通过on 调用动画 */
        .on{
            animation: slideUp 0.5s ease;
        }
    </style>

插入javascript

         //去除 ul的第一个元素节点 放入到ul的最后面  firstElementChild  appendChild
  // 每隔3秒做一次 setInterval
         var ul = document.querySelector(".container ul");
        // 获取到ul
        // ani（animate）执行动画
        function ani(){
            var first = ul.firstElementChild;   
            // 获取到ul的第一个元素
            ul.classList.add("on");
            // 添加一个class on （on会调用slideUp动画，执行动画，500毫秒时间）
            setTimeout(function(){
                ul.appendChild(first);
                // 把第一个元素 放在ul的最后面
                ul.classList.remove("on");
                //  移除on类（下一次调用又可以添加，又可以产生动画）
            },500)
            // 等待500毫秒去执行（动画执行完毕）
        }
        var id = setInterval(ani,3000);
        //每个3秒做一次动画
        
        //鼠标放在container 停止都给你和
        var container = document.querySelector(".container");
        container.onmouseover = function(){
            clearInterval(id);
            // 停止间隔调用
        }
        container.onmouseout = function(){
            id = setInterval(ani,3000);
            //  开始间隔调用
        }
        
        // 鼠标离开开始动画
        
        </script>