为什么我的代码只会跑一遍

来源：6-2 无缝连续滚动特效

DanielDu87

2022-08-15 15:06:24

<!doctype html>
<html lang="zh">
   <head>
      <meta charset="UTF-8">
      <title>document</title>
      <link href="" rel="stylesheet">
   </head>
   <style>
      * {
         margin: 0;
         padding: 0;
      }
      
      .box {
         /*overflow: hidden;*/
         width: 1250px;
         height: 130px;
         margin: 10px auto;
         border: 10px solid red;
         background-color: orange;
      }
      
      ul {
         /*设置相对定位才能使用left控制位置*/
         position: relative;
         width: 3000px;
         height: 150px;
         margin: 0 auto;
      }
      
      ul li {
         float: left;
         margin-right: 10px;
         list-style: none;
      }
      
      ul li:last-child {
         margin-right: 0;
      }
   </style>
   <body>
      <div class="box">
         <ul>
            <li><img alt="" src="../images/number/0.png"></li>
            <li><img alt="" src="../images/number/1.png"></li>
            <li><img alt="" src="../images/number/2.png"></li>
            <li><img alt="" src="../images/number/3.png"></li>
            <li><img alt="" src="../images/number/4.png"></li>
            <li><img alt="" src="../images/number/5.png"></li>
         </ul>
      </div>
      <script>
         var ul_box = document.querySelector("ul");
         //克隆一份
         ul_box.innerHTML += ul_box.innerHTML;
         //全局变量，表示当前ul_box的left值
         var ul_left = 0;
         //定时器
         var timer;
         
         //动画封装成函数
         function move() {
            //设表先关
            clearInterval(timer);
            timer = setInterval(function () {
               //每次移动的宽度：向左移动10*20px
               ul_left -= 10;
               //判断是否到达最右边
               ul_box.style.left = ul_left + "px";
               if (ul_left <= -1260) {
                  //如果到达最右边，将left值设置为0
                  ul_box.style.left = "0";
               }
            }, 20);
         }
         
         //开始动画
         move();
         
         // 鼠标进入停止;
         ul_box.onmouseenter = function () {
            clearInterval(timer);
         };
         
         //鼠标离开继续定时器
         ul_box.onmouseleave = function () {
            //定时器代码放入函数
            move();
         };
      </script>
   </body>
</html>

写回答

1回答