具体原理参见代码里面的注释

总的来说，改变的就是ul.style.left,每次减少5px,意思也就是间隔执行函数里每次往左边跑5px

因为没有在style里面设置 left,所以不需要通过div.defaultView.styledocument.defaultView.getComputedStyle(obj)["left"]这个来找left。

直接ul.style.left就可以为元素添加left的值。

<!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;
      }
      .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>
    <script>
      // 把ul里面的元素多复制一份，方便查看效果
      // 利用间隔执行函数，间隔0.5秒执行一次，也就是改变ul的left的值
      var ulObj = document.getElementById("list");
      ulObj.innerHTML += ulObj.innerHTML;
      //   总的来说，改变的就是ul.style.left,每次减少5px,意思也就是间隔执行函数里每次往左边跑5px
      //   当跑完1260px的时候，又重头回来开始跑
      var left = 0;
      //   定义一个变量接收这个间隔执行函数，方便在不同的地方调用
      var interResult = setInterval;
      //   把间隔执行函数放到一个函数里，只要执行这个函数，就触发间隔执行函数
      //   这样方便操作每次打开网页，就已经是执行状态
      function move() {
        interResult = setInterval(() => {
          // 如果第二0跑到了最左边，那么就把ul的left设置为0，也就是又回到初始位置
          if (left === -1260) {
            left = 0;
          }
          left -= 5;
          ulObj.style.left = left + "px";
        }, 50);
      }
      move();
      //   鼠标移入的时候，间隔执行函数停止
      ulObj.onmouseenter = function () {
        clearInterval(interResult);
      };
      // 鼠标移出，间隔执行函数又开始
     // （这也就是为什么把间隔执行函数的执行过程包装成一个函数，这样方便操作,直接调用函数就可以了）
      ulObj.onmouseleave = function () {
        move();
      };
    </script>
  </body>
</html>

使用DOM操作节点制作无缝连续滚动特效原理

具体原理参见代码里面的注释