用transition实现轮播图无缝衔接

你要吃我的橘子吗

已于 2022-09-29 15:10:13 修改

阅读量829

点赞数

文章标签： javascript 前端开发语言

于 2022-09-29 14:12:06 首次发布

本文链接：https://blog.csdn.net/weixin_73640652/article/details/127105675

版权

该博客介绍如何利用障眼法实现轮播图的无缝衔接，通过复制第一张图片到末尾并精确控制过渡效果，确保在切换时没有明显的缝隙。在JavaScript中，通过setTimeout来避免大幅位移出现在过渡效果中，从而保持视觉连续性。

摘要由CSDN通过智能技术生成

思路

无缝衔接是障眼法，复制第一张图到末尾，使头尾图片相同
每次第一张向左切换时，先大幅位移到最后一张，再开启transition，就没有缝了
每次最后一张向右切换时，先大幅位移到第一张，再开启transition，就没有缝了
这个再开启要使用setTimeout，因为如果同步执行，大幅度的位移会出现在动效里，障眼法就失败了

html

 <div>
      <button class="left">&lt</button>
      <button class="right">&gt</button>
      <ul class="imgList">


         <li class="item ">
            <img src="1.jpg" alt="">
         </li>
         <li class="item ">
            <img src="2.jpg" alt="">
         </li>
         <li class="item ">