2024年 用translate3d 做轮播图

不用任何扩展库，用了css3的 translate3d 发现轮播图只要少许代码就可以实现了，

原理就是用js实现动态改变translate3d(-x00px, 0px, 0px) 这样的语法实现切换

核心部分代码

html

     <div class="lunbox">
     <div class="swiper">
          <img class="pure-img " src="./banner2.jpg" />
     <img class="pure-img " src="./banner1.jpg" />
     <img class="pure-img " src="./banner1.jpg" />
     </div>  </div>

css

 .lunbox {
  width: 702px;
  height: 466px;
  overflow: hidden;
  margin: 18px 0 0 18px;
}

 .lunbox .swiper{
transition-timing-function: ease;
    transition-duration: 700ms;
    cursor: pointer;
display: flex;touch-action: pan-y;transition-property: transform;}

.lunbox img {width:100%;height: 100%;}

js

banner();

 function banner() {
 let imgIndex=1;
 let timer= setInterval(function () {
 let element = document.querySelector('.swiper');
 let trans=imgIndex*702;
 element.style.transform='translate3d(-'+trans+'px, 0px, 0px)';
 imgIndex++;
 if(imgIndex>=3)imgIndex=0;
 },3500);
 }

参考

轮播图效果 - 知乎

transition-timing-function - CSS - 菜鸟学堂-脚本之家