【前端100问】Q63：如何设计实现无缝轮播

作者: alanwhy | 来源:发表于2021-01-28 16:38 被阅读0次

【前端100问】Q63：如何设计实现无缝轮播
js原生—— 无缝轮播
图片轮播器(swift)
h5实现视频手势上下屏滑动(类似抖音)
jQuery实现无缝轮播
jquery实现无缝轮播
Vue 无缝轮播实现
Vue 实现无缝轮播
jQuery实现无缝轮播
css3实现无缝轮播图片

写在前面

此系列来源于开源项目：前端 100 问：能搞懂 80%的请把简历给我
为了备战 2021 春招
每天一题，督促自己
从多方面多角度总结答案，丰富知识
如何设计实现无缝轮播
简书整合地址：前端 100 问

正文回答

代码千万种，这里主要说一下两种实现思想：

每次轮播元素动画执行到末尾的时候迅速让其位置恢复原位，造成视觉上的无缝轮播
将轮播元素复制一份，第一个 item 元素轮播执行完后将其删除后添加在整个轮播列表的最后，造成循环轮播

<div class="slide">
  <ul>
    <li>图片1</li>
    <li>图片2</li>
    <li>图片3</li>
  </ul>
</div>

1、最外层 div.slide 定宽、相对定位 relative

2、ul 足够宽，最起码 li 数\*li 宽度，这里有个技巧，直接 width: 9999em，目的是让里面的所有 li 一字排开

3、滚动效果通过控制 ul 的 left 或者 transform 来进行滚动效果

4、到了最后一个 li，往后看第一个 li 的时：

4.1、准备继续滚动，把最后一个的 li 设置为相对定位 relative，left 值为此时此刻相对 ul 的位置（设置的时候不要带缓动效果），目的是让最后一个 li 不动。

4.2、然后把 ul 的 left 或者 transform 设为 0（这步没有缓动效果），

4.3、然后再正常的开始一样出现第一个 li 的滚动效果（这步有缓动效果）

4.4、最后等无缝的第一个 li 效果完成后，把最后一个 li 的 left 值复原为 0

5、到第一个 li，往前看最后一个 li 时，也是和上面同理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>轮播</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      #continer {
        width: 300px;
        height: 200px;
        position: relative;
        margin: 20px auto;
        border: 1px solid;
        overflow: hidden;
      }
      #lunbo {
        width: 9999em;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      li {
        float: left;
        width: 300px;
        height: 200px;
        text-align: center;
        line-height: 200px;
        color: brown;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div id="continer">
      <ul class="ul" id="lunbo">
        <li class="list">1</li>
        <li class="list">2</li>
        <li class="list">3</li>
        <li class="list">4</li>
        <li class="list">5</li>
      </ul>
    </div>
  </body>
  <script src="./js/jquery3.0.min.js"></script>
  <script>
    let selectNum = 0;
    function lunboFun(selectNum, time) {
      $("#lunbo").animate(
        {
          left: -1 * selectNum * 300,
        },
        time,
        () => {
          selectNum++;
          setTimeout(() => {
            if (selectNum > 4) {
              selectNum = 0;
              $("ul li:last").css(
                {
                  position: "absolute",
                },
                0
              );
              $("ul li:last").animate(
                {
                  left: -300,
                },
                0
              );
              $("#lunbo").animate(
                {
                  left: 300,
                },
                0
              );
            } else if (selectNum < 3) {
              $("ul li:last").css(
                {
                  position: "relative",
                  left: 0,
                },
                0
              );
            }
            lunboFun(selectNum, 1000);
          }, 2000);
        }
      );
    }
    lunboFun(selectNum, 1000);
  </script>
</html>