实现无缝轮播

最新推荐文章于 2025-01-07 13:59:33 发布

「已注销」

最新推荐文章于 2025-01-07 13:59:33 发布

阅读量362

点赞数 1

分类专栏：案例文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/lyc_3858/article/details/125045417

版权

本文介绍了如何利用JavaScript和CSS实现无缝轮播效果。关键在于克隆第一张图片作为假图放置在轮播图末尾，通过切换图片位置并控制过渡效果来达到无缝轮播。同时，文章还提及了防止页面频繁刷新的防抖和限制操作频率的节流技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现无缝逻辑

克隆第一张图1作为假图(1)放到右尽头

//比如: 1 2 3 4 5 => 1 2 3 4 5 (1)

当在1的位置点左边按钮,1先瞬间切(1),然后向左过渡到5;

当在5的位置点右边按钮,5先过渡到(1),过渡完后瞬间切1

瞬间切的时候取消过渡：解决图片有一个滚动到目的图片的过渡;

切完再加上过渡：为了保持后续图片切换的过渡效果。

结构逻辑详情看代码

重点是给最大的盒子设置固定的宽高和溢出隐藏,然后让要轮播的图排成一行,之后就是通过js改变图片的位置就好。

小科普(有一点正经的科普)

防抖:类似王者回泉水,点击回城后只能等待回城的时间结束,如果中间有其他操作都需要重新从0开始等待回城时间。

节流:王者英雄技能冷却

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>无缝轮播</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }

      #box {
        overflow: hidden;
        position: relative;
        width: 950px;
        height: 634px;
        margin: 10px auto;
      }

      #box .img-list {
        display: flex;
        position: relative;
        left: 0;
        width: 100%;
        height: 100%;
        transition: 0.5s ease;
      }

      #box .img-list img {
        width: 100%;
        cursor: pointer;
      }

      #box a {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        color: white;
        user-select: none;
        font-size: 50px;
        text-align: center;
        text-decoration: none;
      }

      #box a.left {
        left: 0;
      }

      #box a.right {
        right: 0;
      }