原生js实现跑马灯效果，鼠标放下可以停止跑动

js原生代码跑马灯效果纯js代码如下：

1.首先html的内容（里面图片自己可以换，li里面也可以填文字）

  <div>       
   <ul>
        <li>呵呵呵呵呵3</li>           
         <li>叽叽叽叽叽4</li>            
         <li>悠悠呦悠悠5</li>            
         <li>哎哎哎哎哎6</li>            
         <li><img src="img/pic/d2.png" alt=""></li>
         <li></li>                            			               
         <li></li>            
         <li>
              <img id='img1' src="img/pic/z1.png">
         </li>
         <li>
              <img src="img/pic/j1.gif" alt="">
             <img src="img/pic/j1.gif" alt="">
             <img src="img/pic/j1.gif" alt="">
         </li>       
    </ul>    
  </div>

2.下面是我CSS设计代码如下：

<style>        
* {       
     margin: 0;            
     padding: 0;       
   }                
body {            
     height: 690px;       
    }                
div {           
    width: 400px;           
    height: 100%;           
    overflow: hidden;           
    border: 1px solid red;            
    margin: 20px auto;            
    background-color: cadetblue;        
 }               
  ul {            
    list-style: none;           
    width: 100%;           
    height: 120%;            
    margin-top: 0;            
    position: relative;           
    background-image: url("img/pic/b1.png");           
    background-size: cover;        
  }                
  ul li {            
     width: 100%;           
     height: 90px;           
     font-size: 20px;           
     line-height: 90px;           
     text-align: center;           
     transition: all 1s;
      cursor: pointer;        
  }                

  li:hover {   
           color: burlywood;      
      }               
  img {            
    margin-left: 10px;        
    }    
 </style>

3.下面是重点js代码（里面我写了好多注释，供你查看）

 window.onload = function() {          
   var s = 0;          
   var text = document.querySelector("ul"); //获取ul因为需要改变他要动
   var li = document.querySelector("li"); //获取li因为要知道他的高       
   var lis; //声明一个全局变量            
   var id; //这个是定时器要用           
   console.log(li.offsetHeight);            
   var bbt = li.offsetHeight; //获取li的高度           
   add(); //这是我自己封装的跑马灯的方法（）           
    function add() {               
        id = setInterval(function() { //首先声明定时器                  
        s -= 1; //全局变量本来是零//每次让他减10；                   
        if (Math.abs(s) >= bbt) { //如果他的s值的绝对值比li的高还大就执行下面的方法                
        s = 0; //把他s赋值为0；                      
        var li = document.querySelector('li'); //获取li元素，现在默认选择的就是第一个li                     
        var ppt = li.cloneNode(true); //然后复制这个当前的li。                      
        text.removeChild(li); //删除第一个li                       
        text.appendChild(ppt); //删除后再添加他，实现一值循环的思想                       
        text.style.marginTop = s + "px"; //改变ul的外上边距的距离为0； 
       }                    
        text.style.marginTop = s + "px"; //这一步也是改变ul的外上边距的距离实现往上动的效果             
      }, 10); //0.01秒一动           
       }
       text.onmouseenter = function() { //当我们鼠标放在了ul上面               
       lis = document.querySelectorAll('li'); //首先获取现在里面所有的li元素               
       for (var i = 0; i < lis.length; i++) { //循环遍历li伟数组                   
               lis[i].onmouseenter = function() { //循环给li绑定鼠标放下的事件                        
               for (var i = 0; i < lis.length; i++) { //这一点是排他思想，首先让全部的li字体为20                             
               lis[i].style.fontSize = '20px';                        
               }                        
               clearInterval(id); //放到了li上面清除定时器                        
               this.style.fontSize = '25px'; //让你放上去的li字体放大                   
                }                
             }            
          }           
           text.onmouseleave = function() { //当我们鼠标离开ul                
           for (var i = 0; i < lis.length; i++) { //首先排他一下，让所有字体都回到原来的大小                    
                lis[i].style.fontSize = '20px';                };               
                setTimeout(function() { //0.3秒后执行下面的跑马灯效果！                   
                add();               
                }, 300);           
            }
      }

4.嗯这就是完整的js代码了
效果如下