JS实现无缝连续滚动特效```html ```JS实现无缝连续滚动特效JS实现无缝连续滚动特效JS实现无缝连续滚动特效J

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 1000px;
        height: 130px;
        border: 1px solid #000;
        margin: 50px auto;
        overflow: hidden;
        left: 20px;
      }
      .box ul {
        list-style: none;
        /* 设置大一点，这样li才能浮动 */
        width: 5000px;
        position: relative;
      }
      .box ul li {
        float: left;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div id="box" class="box">
      <ul id="list">
        <li><img src="images/number/0.png" alt="" /></li>
        <li><img src="images/number/1.png" alt="" /></li>
        <li><img src="images/number/2.png" alt="" /></li>
        <li><img src="images/number/3.png" alt="" /></li>
        <li><img src="images/number/4.png" alt="" /></li>
        <li><img src="images/number/5.png" alt="" /></li>
      </ul>
    </div>
  </body>
  <script>
    var ulObject = document.getElementById("list");
    var div = document.querySelector("div");
    ulObject.innerHTML += ulObject.innerHTML;
    // 跑起来
    var left = 0;
    var a = 0;

    function move() {
      a = setInterval(function () {
        if (left == -1260) {
          left = 0;
        }
        left -= 5;
        ulObject.style.left = left + "px";
      }, 10);
    }
	// 定义好的函数要调用才会执行
    move();
    // 当鼠标移入的时候，间隔执行函数停止
    ulObject.onmouseenter = function () {
      clearInterval(a);
    };

    // 鼠标移出的时候，继续执行间隔执行函数
    ulObject.onmouseleave = function () {
      move();
    };
  </script>
</html>