无缝滚动

        

            
javascript第1章
            
javascript第2章
            
javascript第3章
            
javascript第4章
            
javascript第5章
            
javascript第6章
            
javascript第7章
            
javascript第8章
            
javascript第9章
            
javascript第10章
        

设置css样式：

插入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);
            //  开始间隔调用
        }
        
        // 鼠标离开开始动画