前端 - 怎么写循环平滑的走马灯？我现在的是到末尾会突然到第一个。help？

Question

我移动整个卡片，到末尾的时候，我直接瞬移到第一个，再次循环。我想使用无限循环走马灯的那种效果？

html元素

 <div className="right">    <div className="right_box">      {[...currentList, ...currentList].map((item, index) => {        return (          <div className={`right_list_item`} key={index}>            <div className="right_list_item_img">              <img src={item.img} />            </div>          </div>        );      })}    </div>  </div>

 // 走马灯动画  function loopChangeList() {    const max = 8;    gsap.to('.honors_page_content .right_box', {      transform: `translateX(${-((max - 4) * 3) + 'rem'})`,      // 直线运动      ease: 'linear',      duration: 8,      // 完成后继续循环，实现走马灯效果，从左倒右一直循环      onComplete: () => {        gsap.set('.honors_page_content .right_box', {          transform: `translateX(0)`,        });        loopChangeList();      },    });  }

Answer 1

这玩意弄轮播图组件就行,没必要自己是实现 https://www.swiper.com.cn/demo/index.html