js案例：简单的图片轮播（代码逐行讲解，建议先看完整代码）

最新推荐文章于 2025-03-12 13:07:57 发布

小姚学前端

最新推荐文章于 2025-03-12 13:07:57 发布

阅读量1.1w

点赞数 19

分类专栏： js案例文章标签： javascript tensorflow 开发语言

本文链接：https://blog.csdn.net/qq_52799985/article/details/132196877

版权

js案例专栏收录该内容

8 篇文章

订阅专栏

3.js部分

一.效果预览图

二，实现思路

1.html部分

<div class="wp">

这个容器div具有"class"属性，值为"wp"，表示"wrapper"（包装器）。它设置了幻灯片的尺寸和定位方式。

<div id="list">
    <img src="./images/微信图片编辑_20221118164531.jpg" alt="">
    <img src="./images/微信图片编辑_20221118170018.jpg" alt="">
    <img src="./images/微信图片编辑_20221118170050.jpg" alt="">
    <img src="./images/微信图片编辑_20221118170113.jpg" alt="">
</div>

这个ID为"list"的div包含了一系列的<img>标签，每个标签代表幻灯片中的一张图片。每个<img>标签的src属性应指向相应的图片文件。

<div id="box">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

ID为"box"的div表示分页器的圆点。每个<span>标签代表一个圆点，对应幻灯片中的一张图片。<span>标签的数量应与幻灯片的数量相匹配。

<div id="r"></div>
<div id="l"></div>

ID为"r"和"l"的div通常表示幻灯片的向右（前进）和向左（后退）导航按钮。

2.css部分

*{
    margin: 0;
    padding: 0;
}

这个星号表示应用于所有元素的通用样式。在这里，它将页面上所有元素的外边距和内边距都设置为0。

.wp{
    width: 250px;
    height: 400px;
    margin: 40px auto 0;
    position: relative;
    overflow: hidden;
}

这个类选择器.wp用于设置幻灯片容器的样式。它设置了幻灯片容器的宽度和高度为250px和400px，通过margin属性设置了顶部边距40px，auto表示自动水平居中对齐。position: relative表示相对定位，并设置了overflow: hidden，使超出容器尺寸的内容被隐藏。

#list{
    display: flex;
    width: 1000px;
    transform: translateX(0);
    /* 添加过渡动画 */
    transition: all 1s;
}

这个ID选择器#list用于设置图片列表的样式。通过display: flex实现了图片的水平排列。width: 1000px设置了图片列表的宽度为1000px。transform: translateX(0)是一个位移变换，这里设置为初始位置，可以通过改变translateX的值来切换不同的幻灯片位置。transition: all 1s表示添加了1秒的过渡动画效果，使幻灯片在切换时具有平滑的过渡效果。

.wp div img{
    width: 250px;
    height: 400px;
}

这个选择器用于设置幻灯片中的图片样式。通过设置width: 250px和height: 400px，将图片的宽度和高度限制为250px和400px。

#box {
    height: 40px;
    width: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

这个ID选择器#box用于设置分页器容器的样式。它设置了分页器容器的高度为40px，宽度为100%，并使用position: absolute相对于父容器进行定位。background: rgba(0, 0, 0, 0.5)设置了背景为半透明的黑色。left: 0和bottom: 0将分页器容器定位在父容器的左下角。display: flex、justify-content: center和align-items: center实现了分页器内圆点的水平居中对齐和垂直居中对齐。

#box span {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

这个选择器用于设置分页器容器内的圆点样式。通过width: 10px和height: 10px将圆点的宽度和高度设置为10px。background: #fff将圆点的背景颜色设置为白色。border-radius: 50%将圆点的边框半径设置为50%，使其呈现圆形。margin: 0 5px设置了圆点之间的水平间距为5px。cursor: pointer将鼠标光标样式设置为手型，表示可以进行点击操作。

#box span:hover{
    background: pink;
    box-shadow: 0 0 0 2px #ccc;
}

这个选择器用于设置鼠标悬停在圆点上时的样式。background: pink将圆点的背景颜色设置为粉色。box-shadow: 0 0 0 2px #ccc设置了圆点的阴影效果，使其在悬停时显示一个2像素宽度的灰色边框。

#r{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 170px;
    right: 0;
    background: url(./images/右箭头.png)no-repeat 0 0/100% 100%;
}

ID选择器#r用于设置幻灯片的向右导航按钮的样式。宽度和高度都设置为20px。通过position: absolute将按钮相对于父容器进行定位。top: 170px将按钮定位在距离顶部170px的位置。right: 0将按钮定位在父容器的右侧。background: url(./images/右箭头.png)no-repeat 0 0/100% 100%设置了按钮的背景为指定图片，并将该图片作为背景图实现按钮的显示。

#l{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 170px;
    left: 0;
    background: url(./images/左箭头\ \(1\).png)no-repeat 0 0/100% 100%;
}

ID选择器#l用于设置幻灯片的向左导航按钮的样式。宽度和高度都设置为20px。通过position: absolute将按钮相对于父容器进行定位。top: 170px将按钮定位在距离顶部170px的位置。left: 0将按钮定位在父容器的左侧。background: url(./images/左箭头\ \(1\).png)no-repeat 0 0/100% 100%设置了按钮的背景为指定图片，并将该图片作为背景图实现按钮的显示。

3.js部分

1. var box=document.getElementById('box');

这行代码获取具有id为’box’的元素，并将其赋值给变量box。

2. var spanBox=box.getElementsByTagName('span');

这行代码获取box元素下的所有span元素，并将这些元素保存在变量spanBox中。

3. var list=document.getElementById('list');

这行代码获取具有id为’list’的元素，并将其赋值给变量list。

4. spanBox[0].onclick=function(){
        list.style.transform="translateX(0px)";
    };

这段代码给spanBox[0]元素绑定了一个点击事件处理函数。当点击spanBox[0]元素时，它会将list元素的transform样式属性设置为translateX(0px)，即不产生水平偏移。

5. spanBox[1].onclick=function(){
        list.style.transform="translateX(-250px)";
        console.log("点击了第二个图片");
    };

这段代码给spanBox[1]元素绑定了一个点击事件处理函数。当点击spanBox[1]元素时，它会将list元素的transform样式属性设置为translateX(-250px)，即产生水平偏移250个像素，并在控制台打印消息"点击了第二个图片"。

6. spanBox[2].onclick=function(){
        list.style.transform="translateX(-500px)";
    };

这段代码给spanBox[2]元素绑定了一个点击事件处理函数。当点击spanBox[2]元素时，它会将list元素的transform样式属性设置为translateX(-500px)，即产生水平偏移500个像素。

7. spanBox[3].onclick=function(){
        list.style.transform="translateX(-750px)";
    };

这段代码给spanBox[3]元素绑定了一个点击事件处理函数。当点击spanBox[3]元素时，它会将list元素的transform样式属性设置为translateX(-750px)，即产生水平偏移750个像素。

8. var n=0;

这行代码声明了一个名为n的变量，并将其初始化为0。

9. var r=document.getElementById('r');
   var l=document.getElementById('l');

这行代码通过getElementById方法获取具有id为’r’和’l’的元素，并将它们分别赋值给变量r和l。

10. r.onclick=function(){
        if(n<3){
            n++;
        }
        list.style.transform="translateX(-"+n*250+"px)";
        console.log(n);
    };

这段代码给变量r绑定了一个点击事件处理函数。当点击r元素时，它会执行以下操作：

如果n小于3（图片索引的最大值），则将n递增1。
计算translateX的值为-n*250，将它赋值给list元素的transform样式属性。这样可以产生水平偏移。
在控制台打印n的值。

11. l.onclick=function(){
        if(n>0){
            n--;
        }
        list.style.transform="translateX(-"+n*250+"px)";
        console.log(n);
    };

这段代码给变量l绑定了一个点击事件处理函数。当点击l元素时，它会执行以下操作：

如果n大于0（图片索引的最小值），则将n递减1。
计算translateX的值为-n*250，将它赋值给list元素的transform样式属性。这样可以产生水平偏移。
在控制台打印n的值。

以上是代码片段的详细解释。这段代码主要包含了事件处理函数，通过点击不同的按钮来改变list元素的transform样式属性，从而产生水平偏移效果。同时，它还使用了变量n来记录当前显示的图片索引，在切换图片时增加或减少n的值，并将其应用于水平偏移的计算。

三.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 250px;
            height: 400px;
            margin: 40px auto 0;
            position: relative;
            overflow: hidden;
        }
        #list{
            display: flex;
            width: 1000px;
            transform: translateX(0);
            /* 添加过渡动画 */
            transition: all 1s;
        }
        .wp div img{
            width: 250px;
            height: 400px;
        }
        #box {
            height: 40px;
            width: 100%;
            position: absolute;
            background: rgba(0, 0, 0, 0.5);
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #box span {
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }
        #box span:hover{
            background: pink;
            box-shadow: 0 0 0 2px #ccc;
        }
        #r{
            width: 20px;
            height: 20px;
            position: absolute;
            top: 170px;
            right: 0;
            background: url(./images/右箭头.png)no-repeat 0 0/100% 100%;
        }
        #l{
            width: 20px;
            height: 20px;
            position: absolute;
            top: 170px;
            left: 0;
            background: url(./images/左箭头\ \(1\).png)no-repeat 0 0/100% 100%;
        }
    </style>
</head>
<body>
    <!-- 外层的div，包含图片列表 -->
    <div class="wp">
        <div id="list">
            <img src="./images/微信图片编辑_20221118164531.jpg" alt="">
            <img src="./images/微信图片编辑_20221118170018.jpg" alt="">
            <img src="./images/微信图片编辑_20221118170050.jpg" alt="">
            <img src="./images/微信图片编辑_20221118170113.jpg" alt="">
        </div>
        <!-- 分页器 -->
        <div id="box">
             <span></span>
             <span></span>
             <span></span>
             <span></span>
        </div>
        <div id="r"></div>
        <div id="l"></div>
    </div>
</body>
</html>
<script>
    // 获取需要点击的分页器
    let box = document.getElementById('box');
    let spanBox = box.getElementsByTagName('span');
    // 获取列表元素
    let list = document.getElementById('list');

    // 点击分页器
    spanBox[0].onclick = function () {
        list.style.transform='translateX(0px)'
    };
    spanBox[1].onclick = function () {
        list.style.transform='translateX(-250px)'
        console.log('点击了第二个图片');
    };
    spanBox[2].onclick = function () {
        list.style.transform='translateX(-500px)'
    };
    spanBox[3].onclick = function () {
        list.style.transform='translateX(-750px)'
    };
    
    let n = 0;
    let r = document.getElementById('r');
    let l = document.getElementById('l');
    r.onclick = function (){
        n<3? n++ :n;
        console.log(n);
        list.style.transform='translateX(-'+n*250+'px)'
    };
    l.onclick = function (){
        n>0? n-- :n=0;
        console.log(n);
        list.style.transform='translateX(-'+n*250+'px)'
    };
</script>