20行代码实现图片轮播效果

实现的效果是：每隔1s自动切换，实现自动循环轮播。

//CSS *{ padding:0; margin: 0; } .wrap{ overflow: hidden; width: 300px; height: 200px; } .swiper-wrap{ font-size: 0; height: 200px; white-space: nowrap; } .block{ width: 300px; height: 200px; font-size: 32px; color: white; display: inline-flex; justify-content: center; align-items: center; vertical-align: middle; } .block1{ background-color: red; } .block2{ background-color: orange; } .block3{ background-color: lightcoral; } .block4{ background-color: lightblue; display: inline-flex; vertical-align: middle; }

</style>

```//html代码
<div class="wrap">
    <div class="swiper-wrap" id="swiper">
        <div class="block1 block">1</div>
        <div class="block2 block">2</div>
        <div class="block3 block">3</div>
        <div class="block4 block">4</div>
        <div class="block1 block">1</div>
    </div>
</div>

//JS 代码20行
    swipe();
  function swipe(){
    const swiperDom = document.querySelector("#swiper");
    //当前显示的第几个
    let current = 1;
    setTimeout(()=>{
      const X = current * (-300);
      swiperDom.style.transition = "transform 1s linear";
      swiperDom.style.transform = `translateX(${X}px)`;
      current++;
      setInterval(()=>{
        const X = current * (-300);
        swiperDom.style.transition = "transform 1s linear";
        swiperDom.style.transform = `translateX(${X}px)`;
        current++;
        if(current==5){
          current = 1;
          setTimeout(()=>{
            swiperDom.style.transition = "none";
            swiperDom.style.transform = "translateX(0px)";
          }, 1000)
        }
      }, 2000);
    },1000);
  }

上面20行代码可以实现图片轮播效果的，但是存在一个问题：网页tab切换会导致计时器出现bug，所以要进一步完善下：

  swipe();
  function swipe(){
    const swiperDom = document.querySelector("#swiper");
    //当前显示的第几个
    let current = 1;
    let timer1, timer2, timer3;
    const play = ()=> {
      timer1 = setTimeout(()=>{
        const X = current * (-300);
        swiperDom.style.transition = "transform 1s linear";
        swiperDom.style.transform = `translateX(${X}px)`;
        current++;
        timer2 = setInterval(()=>{
          const X = current * (-300);
          swiperDom.style.transition = "transform 1s linear";
          swiperDom.style.transform = `translateX(${X}px)`;
          current++;
          if(current>=5){
            current = 1;
            timer3 = setTimeout(()=>{
              swiperDom.style.transition = "none";
              swiperDom.style.transform = "translateX(0px)";
            }, 1000)
          }
        }, 2000);
      },1000);
    }

    const pause = ()=> {
      clearTimeout(timer1);
      clearInterval(timer2);
      clearTimeout(timer3);
    }

    play();
    // 浏览器tab 切换 需要激活或者暂定 
    // 参考：https://blog.csdn.net/weixin_43684713/article/details/88967309
    const bowhidden="hidden" in document?"hidden": "webkithidden" in document?"webkithidden": "mozhidden" in document ?"mozhidden": null;
    const vibchage="visibilitychange" || "webkitvisibilitychange" || "mozvisibilitychange";
    document.addEventListener(vibchage, function (){
      /*ie10+  moz  webkit  默认*/
      if(!document[bowhidden]) /*false*/
      {
        play();
        console.log("激活");
      }
      else{
        pause();
        /*true*/
        console.log("隐藏");

      }
    })
  }

上面这种写法也容易翻车，补充另外一种写法吧

  function swipe2(){
    const swiperDom = document.querySelector("#swiper");
    //当前显示的第几个
    let current = 1;
    swiperDom.addEventListener("transitionend", myTransitionEnd);
    swiperDom.addEventListener("webkitTransitionend", myTransitionEnd);
    function myTransitionEnd(){
      if(current >= 5){
        current = 1;
        swiperDom.style.transition = "none";
        swiperDom.style.webkitTransition = "none";
        swiperDom.style.transform = "translateX(0px)";
      }
    }
    let timer1 = null;
    let timer2 = null;

    const play = ()=>{
      timer1 = setTimeout(()=>{
        const X = current * (-300);
        swiperDom.style.transition = "transform 1s linear";
        swiperDom.style.webkitTransition = "transform 1s linear";
        swiperDom.style.transform = `translateX(${X}px)`;
        current++;
        timer2 = setInterval(()=>{
          const X = current * (-300);
          swiperDom.style.transition = "transform 1s linear";
          swiperDom.style.transform = `translateX(${X}px)`;
          current++;
        }, 2000);
      },1000);
    }

    const pause = ()=>{
      clearTimeout(timer1);
      clearInterval(timer2);
    }

    play();
    const bowhidden="hidden" in document?"hidden": "webkithidden" in document?"webkithidden": "mozhidden" in document ?"mozhidden": null;
    const vibchage="visibilitychange" || "webkitvisibilitychange" || "mozvisibilitychange";
    document.addEventListener(vibchage, function (){
      /*ie10+  moz  webkit  默认*/
      if(!document[bowhidden]) /*false*/
      {
        play();
        console.log("激活");
      }
      else{
        pause();
        /*true*/
        console.log("隐藏");

      }
    })
  }

  swipe2();