详细说明如何实现简易轮播效果

凉凉心.

发布于 2025-10-13 15:54:20

1240

文章被收录于专栏：CSDN专栏CSDN专栏

开发工具与关键技术：vs code，JavaScript、jQuery、html、css

1、思路：最基本的轮播要怎样简化？如何拥有够好的扩展性？如何拥有够好的实用性？

2、html布局： 1、如图：目的——首先明白移动层body类的作用：这个元素内包裹的元素就是移动的元素，当body这个类随意使用某个可移动的样式时，内容元素就会随着body类移动而移动；

问题（1）：当知道要移动body类就可以形成轮播的初步运作逻辑时，body类中的内容元素布局就会很关键！我们要将内容元素连着平铺在body这个类中！这个案例中，我给body类的样式改变了display，改成了flex，这样内容元素就会整个平铺在body类中。如图：

2、如何将内容元素做到100%大小：

图中，给body类的宽度设定了1000%，每个内容元素设置为10%，直观看是10%，但是body类的宽度设为了1000%，也就是说内容元素的宽度10%是依照父元素也就是body类进行设置的。所以！这里10%就是body类1000%里的100%（1000 / 10 = 100）

3、overflow给谁？为什么要给它？

都知道这个是关键，所以消除边界外的内容肯定是整个轮播的最外层的那个元素。解释：在图中可看到移动层body类跟控制层clickbutton类被整个轮播内容类content类包裹，控制层也不是内容层那样是占用主力空间的元素。所以将overflow：hidden这个属性给在content类上，这样轮播的结构才是稳固的一体性的！好处：轮播外的元素可以移入进来，轮播内的元素在轮播外看不见。

4、控制层和html结构拓展性说明 控制层是一部分刚入前端的小白所踩的坑。这里先重点说明：控制层千万千万千万别创建在移动层中，如果你要使用这篇文章说明的轮播效果，那么控制层绝对不能创建在移动层中！否则移动层设置属性值移动时控制层也会像内容元素一样跟着跑！这里又涉及到结构扩展性的问题，够好的结构是可以明确分明 “一级” 跟 “二级” 元素的层级关系，这就是刚涉及前端的小白犯问题的地方，结构不正确！不正确的结构会导致css样式的设置出现问题，例如position定位的相对、绝对定位。

假设内容的主元素是一级元素，那么往下的直接子元素就是二级元素，二级元素往下的直接子元素就是三级，然后一直往下会有很多的子元素。

当我们将主元素设置为body类，那么body类就是一级元素，它的直接子元素是二级元素。二级元素跟二级元素是相同的也就是兄弟元素，都属于二级元素。

所以在结构上，控制层不能创建在移动层内，不然这里的控制层会被移动层当作是二级元素！当移动层内出现了控制层，控制层的兄弟元素将会是可移动的内容元素！移动层移动后，你要的控制元素可能会不可见！

5、移动层的样式问题 我们要让移动层动起来，肯定不能没有过渡属性，当然在js中使用jQuery里的animate方法设置属性达到动画效果也是可以的，animate的这种方法会在不间断轮播中用到。首先要看我们的目的性：我们的目的不就是让移动层移动吗？所以给body类设置一个相对定位，再给一个transition属性，时间自定义。如图：

这里也有一个小误区：设置left的位置。 如果将left设置在style样式中，那么，你如果使用js去更改他的left值达到移动效果时，他会先将你设置的值给予在内联样式上，而不是直接更改style样式中的left值！这种的效果在未赋予left于内联样式上的时候会第一步赋予在内联样式上！这一步，没有过渡效果！使用jQuery或许就没有这种问题，为了保险我们还是将left值设置在内联样式上；如图：

3、JavaScript部分 首先该理解的是当点击按钮时移动层的left值变动。这里使用jQuery写法，为两个按钮绑定点击事件。这里#next为下一张，#prev为上一张。

绑定好事件后，设置关键的两个全局变量。一个是index用于记录当前所在内容屏数。另一个是num用于设定当前的移动距离，100%就是100，多少宽度就是设置多少宽度。 这两个几乎是所有轮播中必备的变量，一定不能忘了用！

图中没有写到，需要再来一个全局变量move，这个变量只需要创建就好值是空的也没问题

1、点击按钮的事件内容 移动的内容只有这么点。

第一行代码：点击后，内容肯定要换到下一屏内容，所以记录屏数的index变量自加1不难理解。 第二行代码：move的这个变量，也需要是全局变量，因为这个变量就是记录着整个轮播的移动量！上一张和下一张都需要看这个值的多少。 第三行代码：最后将这个计算过后的move值替代left的值，那么点击“下一张”按钮后就可以看清楚运动轨迹了。 “#prev（上一张）”按钮的事件一样，只是将index自加改为了index–（自减）而已。 这里left的设置是设置body类（移动层）喔！不要设置错了！否则是搞大问题！

2、最后一屏内容的处理 最后的处理点就是移动至最后一屏再次点击按钮后出现的内容。如图：

通常处理就是加上if判定，判定内容是index（记录屏数的变量）是否等于最后一屏内容。

1-问：这一步的关键是明白index == 4 意味着什么？ 1-答：意味着我们所见屏数来到了最后一屏内容，再次按下按钮需要回到第一屏或者最后一屏。

2-问：if判定为什么要放在事件的第一行？ 2-答：因为这个判定的内容是判定index变量，所以必须放在index自减或自加的前面；最保险的就是放在第一行。

明白if判定的内容后，再看判定内执行的代码。首先在脑内构思。在最后一屏内容，再次按下按钮触发了判定，我们需要将可见屏数调回第一屏或最后一屏，所以index 肯定是要重新设置。由于index是全局变量所以if内index值改变是会影响到click事件外的index值的，这也是全局变量的用处之一；图中显示的是点击“下一张”的按钮所以，这里if内的index重新设置为0（第一屏数）然后将移动的主体代码重新放进if内就好了。 最后！如果不加上else将if外的代码包裹的话，那么这里if内的执行代码，在最后一定要return返回。不然会再次执行if判定外的代码！ “#prev（上一张）”的点击事件中的if判定跟图中的if判定的思路是一样的。同样是判定的最后一屏，更改返回的屏数。

技术点总结：怎么说，轮播的技术点参合了许多的知识点。是刚学前端的人必须跨过去的坎，轮播的形成方式有很多，不只限于这篇文章中的更改left值作为主轮播效果，也可以使用transform: translateX();来移动 “移动层”。再多说一句，轮播的html结构是很重要的！别以为只是单纯的js而已。

希望本篇文章能够帮到你；

源代码（直接复制后，别忘了引入jQuery）。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础的轮播效果</title>
    <!-- 样式 -->
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .content {
            overflow: hidden;
        }

        .body {
            transition: all .5s;
            width: 1000%;
            display: flex;
            position: relative;
        }

        [litem="causel"] {
            width: 10%;
            height: 320px;
            text-align: center;
            line-height: 280px;
            font-size: 30px;

        }

        .img1 {
            background-color: red;
        }

        .img2 {
            background-color: yellow;
        }

        .img3 {
            background-color: blue;
        }

        .img4 {
            background-color: green;
        }

        .img5 {
            background-color: orange;
        }

        .clickbutton {
            display: flex;
            justify-content: center;
        }

        .clickbutton>button {
            margin: 0 50px;
            width: 80px;
            height: 50px;
        }
    </style>
</head>

<body>

    <!-- 页面内容渲染 -->
    <div class="content">
        <!-- 移动层 -->
        <div class="body" style="left: -0%;">
            <div class="img1" litem="causel">1</div>
            <div class="img2" litem="causel">2</div>
            <div class="img3" litem="causel">3</div>
            <div class="img4" litem="causel">4</div>
            <div class="img5" litem="causel">5</div>
        </div>
        <!-- 控制层 -->
        <div class="clickbutton">
            <button id="prev">◀</button>
            <button id="next">▶</button>
        </div>
    </div>

    <!-- jQ引入 -->
    <script src="./jquery-3.2.1.min.js"></script>
    <!-- js部分 -->
    <script type="text/javascript">
        $(function () {
            var index = 0;//记录当前内容
            var num = 100//移动距离
            var move
            // 下一张
            $("#next").click(function () {
                if(index == 4){
                    index = 0
                    move = num*index
                    $(".body").css("left" , "-"+move+"%")
                    return
                }
                index++ 
                move = num*index
                $(".body").css("left" , "-"+move+"%")
            });
            //    上一张
            $("#prev").click(function () {
                if(index == 0){
                    index = 4
                    move = num*index
                    $(".body").css("left" , "-"+move+"%")
                    return
                }
                index--
                move = num*index
                $(".body").css("left" , "-"+move+"%")
            });
        })
    </script>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-10-13，如有侵权请联系 cloudcommunity@tencent.com 删除

前端