无缝连续滚动&轮播&呼吸轮播_carouselimages.innerhtml += firstset;-优快云博客

本文链接：https://blog.youkuaiyun.com/chonger_feifei/article/details/123521499

本文详细介绍了如何使用HTML、CSS和JavaScript实现无缝滚动效果和两种类型的轮播图，分别是鼠标悬浮暂停的无缝滚动和具有左右按钮的轮播图。其中，无缝滚动通过复制元素并调整定位实现，而轮播图则利用CSS过渡效果和JavaScript控制图片的显示与切换。文章还提供了具体的代码示例，包括轮播图的呼吸效果和无过渡效果。

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

无缝连续滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1000px;
            height: 130px;
            border: 1px solid #000;
            margin: 50px auto;
            overflow: hidden;
        }

        .box ul {
            list-style: none;
            /* 技巧：不想计算设置得大一点，保证li浮动后并排 */
            width: 5000px;
            position: relative;
        }

        .box ul li {
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div id="box" class="box">
        <ul id="list">
            <li><img src="images/number/0.png" alt=""></li>
            <li><img src="images/number/1.png" alt=""></li>
            <li><img src="images/number/2.png" alt=""></li>
            <li><img src="images/number/3.png" alt=""></li>
            <li><img src="images/number/4.png" alt=""></li>
            <li><img src="images/number/5.png" alt=""></li>
        </ul>
    </div>
    <script>
        var box = document.getElementById('box');
        var list = document.getElementById('list');

        // 复制一遍所有li
        list.innerHTML += list.innerHTML;

        // 全局变量，表示当前list的left值
        var left = 0;

        // 定时器，全局变量
        var timer;

        move();

        // 动画封装成函数
        function move() {
            // 设表先关，防止动画积累
            clearInterval(timer);

            timer = setInterval(function () {
                left -= 4;
                // 验收
                if (left <= - 1260) {
                    left = 0;
                }
                list.style.left = left + 'px';
            }, 20);
        }

        // 鼠标进入清除定时器
        box.onmouseenter = function () {
            clearInterval(timer);
        };

        // 鼠标离开通过调用动画函数继续运动
        box.onmouseleave = function () {
            move();
        };
    </script>
</body>

</html>

轮播图

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .carousel {
        width: 650px;
        height: 360px;
        border: 1px solid #000;
        margin: 50px auto;
        position: relative;
        overflow: hidden;
      }

      .carousel ul {
        list-style: none;
        width: 9999px;
        position: relative;
        left: 0px;
        transition: left 0.5s ease 0s;
      }

      .carousel ul li {
        float: left;
      }

      .carousel .leftbtn {
        position: absolute;
        left: 20px;
        top: 50%;
        margin-top: -25px;
        width: 50px;
        height: 50px;
        background-color: blue;
        border-radius: 50%;
      }

      .carousel .rightbtn {
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -25px;
        width: 50px;
        height: 50px;
        background-color: blue;
        border-radius: 50%;
      }
    </style>
  </head>

  <body>
    <!-- 跑马灯:最后一张需克隆;呼吸:最后一张不需克隆 -->
    <div class="carousel">
      <ul id="list">
        <li><img src="./images/beijing/0.jpg" alt="" /></li>
        <li><img src="./images/beijing/1.jpg" alt="" /></li>
        <li><img src="./images/beijing/2.jpg" alt="" /></li>
        <li><img src="./images/beijing/3.jpg" alt="" /></li>
        <li><img src="./images/beijing/4.jpg" alt="" /></li>
        <li><img src="./images/beijing/0.jpg" alt="" /></li>
      </ul>
      <!-- 执行空JS语句 返回的是空或false值 -->
      <!-- 把 javascript:; 加在超级链接上可防止链接跳转；而后事件监听顺利执行-->
      <a href="javascript:;" class="leftbtn" id="leftbtn"></a>
      <a href="javascript:;" class="rightbtn" id="rightbtn"></a>
    </div>
    <script>
      // 得到按钮和ul，ul整体进行运动
      var oLeftbtn = document.getElementById("leftbtn");
      var oRightbtn = document.getElementById("rightbtn");
      var oList = document.getElementById("list");

      // 图片标识变量
      var idx = 0;
      // 函数节流:防止用户点击过快,造成原有的过渡失去效果
      var lock = true;
      // 思路不同于左：右先拉再替换
      oRightbtn.onclick = function () {
        //如果锁是关闭状态，则不执行
        if (!lock) return;
        // 尾-首思路：1.到假身，有过渡；2.假身到真身，瞬间移动
        // CSS中有过渡，为何要加呢?最后一张图过渡被去掉，为保证其他图片过渡存在
        oList.style.transition = "left .5s ease 0s";
        idx++;
        // 功能上，将ul瞬间拉回第0张位置
        // 时间上，过渡结束之后再拉回，0.5s=500秒
        setTimeout(function () {
          if (idx > 4) {
            oList.style.transition = "none";
            oList.style.left = 0;
            idx = 0;
          }
        }, 500);
        oList.style.left = -idx * 650 + "px";
        //关锁
        lock = false;
        //指定毫秒数后将锁打开
        setTimeout(function () {
          lock = true;
        }, 500);
      };
      // 思路不同于右：左先替换，再拉
      oLeftbtn.onclick = function () {
        if (!lock) return;
        //正展示图0，下一步展示图4，
        //瞬间拉到火车尾部
        if (idx == 0) {
          oList.style.transition = "none";
          oList.style.left = -5 * 650 + "px";
          //再缓慢拉到图4左/图3右
          //技巧：延时器设置0秒，瞬移结束后立即就加上了过渡
          setTimeout(function () {
            oList.style.transition = "left .5s ease 0s";
            idx = 4;
            oList.style.left = -idx * 650 + "px";
          }, 0);
        } else {
          idx--;
          oList.style.left = -idx * 650 + "px";
        }
        //关锁
        lock = false;
        //指定毫秒数后将锁打开
        setTimeout(function () {
          lock = true;
        }, 500);
      };
    </script>
  </body>
</html>

呼吸轮播图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .carousel {
            width: 650px;
            height: 360px;
            border: 1px solid #000;
            margin: 50px auto;
            position: relative;

        }

        .carousel ul {
            list-style: none;
        }

        .carousel ul li {
            position: absolute;
            top: 0;
            left: 0;
            /* 透明度都是0 */
            opacity: 0;
            transition: opacity 1s ease 0s;
        }

        /* 只有第一张透明度是1 */
        .carousel ul li:first-child {
            opacity: 1;
        }

        .carousel .leftbtn {
            position: absolute;
            left: 20px;
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background-color: rgb(28, 180, 226);
            border-radius: 50%;
        }

        .carousel .rightbtn {
            position: absolute;
            right: 20px;
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background-color: rgb(28, 180, 226);
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="carousel">
        <ul id="list">
            <li><img src="images/beijing/0.jpg" alt=""></li>
            <li><img src="images/beijing/1.jpg" alt=""></li>
            <li><img src="images/beijing/2.jpg" alt=""></li>
            <li><img src="images/beijing/3.jpg" alt=""></li>
            <li><img src="images/beijing/4.jpg" alt=""></li>
        </ul>
        <a href="javascript:;" class="leftbtn" id="leftbtn"></a>
        <a href="javascript:;" class="rightbtn" id="rightbtn"></a>
    </div>
    <script>
        // 得到按钮和ul，ul整体进行运动
        var leftbtn = document.getElementById('leftbtn');
        var rightbtn = document.getElementById('rightbtn');
        var list = document.getElementById('list');
        var lis = list.getElementsByTagName('li');

        // 当前是第几张图显示
        var idx = 0;

        // 节流
        var lock = true;

        // 右按钮
        rightbtn.onclick = function () {
            // 判断节流
            if (!lock) return;

            lock = false;

            // 还没有改idx，此时的idx这个图片就是老图，老图淡出
            lis[idx].style.opacity = 0;
            idx++;
            if (idx > 4) idx = 0;
            // 改了idx，此时的idx这个图片就是新图，新图淡入
            lis[idx].style.opacity = 1;

            // 动画结束之后，开锁
            setTimeout(function () {
                lock = true;
            }, 1000);
        }

        // 左按钮
        leftbtn.onclick = function () {
            // 判断节流
            if (!lock) return;

            lock = false;

            // 还没有改idx，此时的idx这个图片就是老图，老图淡出
            lis[idx].style.opacity = 0;
            idx--;
            if (idx < 0) idx = 4;
            // 改了idx，此时的idx这个图片就是新图，新图淡入
            lis[idx].style.opacity = 1;

            // 动画结束之后，开锁
            setTimeout(function () {
                lock = true;
            }, 1000);
        }
    </script>
</body>

</html>