博客

function animateMove(element, target) {
    //先清理定时器（为了保证每次调用的都是同一个定时器 或者说 无论点多少次按钮都只调用一个定时器）
    clearInterval(element.timeId);
    //启动一个定时器，定时器的Id值存储到了一个对象的属性中
    element.timeId = setInterval(function () {
        var current = element.offsetLeft;//获取当前ul的位置(数字类型)
        var step = 10;
        step = target - current > 0 ? step : -step; //决定左右移动方向
        current += step; //当前移动到的位置
        if (Math.abs(target - current) > Math.abs(step)) { //与目标的距离 > 每次移动的step
            element.style.left = current + "px";
        } else { //马上到达目标了（与目标的距离 < step）
            clearInterval(element.timeId);  //清理定时器
            element.style.left = target + "px"; //直接到达目标位置
        }
    }, 10);
}

改进为按百分比跳转进度

last() {
      if (this.personProgress !== 0) {
        const res = document.getElementById("mid_center");
        // console.log(res);
        this.personProgress += 10;
        this.animateMove(res, this.personProgress);
      }
    },
next() {
      const midCenterClassDom = document.getElementsByClassName("mid_center");
      const mid_centerIdDom = document.getElementById("mid_center");
      const outBoxClassDom = document.getElementsByClassName("outBox");
      if (
        -this.current / 10 !==
        Math.ceil(
          (midCenterClassDom[0].offsetWidth - outBoxClassDom[0].offsetWidth) /
            (outBoxClassDom[0].offsetWidth / 10)
        )
      ) {
        this.personProgress -= 10;
        this.outBoxWidth = outBoxClassDom[0].offsetWidth;
        this.innerBoxWidth = midCenterClassDom[0].offsetWidth;
        this.animateMove(mid_centerIdDom, this.personProgress);
      }
    },
 // 移动函数
animateMove(element, target) {
      // 先清理定时器（为了保证每次调用的都是同一个定时器 或者说 无论点多少次按钮都只调用一个定时器）
      clearInterval(element.timeId);
      // 启动一个定时器，定时器的Id值存储到了一个对象的属性中
      element.timeId = setInterval(() => {
        var step = 1;
        console.log(this.current, "this.current1");
        step = target - this.current > 0 ? step : -step; // 决定左右移动方向
        this.current += step; // 当前移动到的位置
        if (Math.abs(target - this.current) > Math.abs(step)) {
          console.log("进入if");
          // 与目标的距离 > 每次移动的step
          console.log(this.current, "this.current2");
          element.style.left = this.current + "%";
          console.log(element.style.left, "element.style.left");
        } else {
          console.log("进入else");
          // 马上到达目标了（与目标的距离 < step）
          clearInterval(element.timeId); // 清理定时器
          console.log(target, "target");
          this.current = target;
          console.log(this.current, "this.current3");
          element.style.left = target + "%"; // 直接到达目标位置
        }
      }, 10);
    },