用animation实现轮播图无缝衔接

VIP文章你要吃我的橘子吗

已于 2022-09-29 15:08:45 修改

阅读量470

点赞数

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

于 2022-09-29 03:31:30 首次发布

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

版权

思路

使用animation来展示轮播图：
轮播分为两个独立的部分：位移与动效。使二者互不影响
动效分为进入动画和退出动画
在所有动效结束后位移

html部分

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

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