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

article/2025/6/27 6:20:50

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);           }}