前端学习篇——用JavaScript (JS) 制作轮播图

一、引言

        本人在进行 JS 的学习过程中遇到了轮播图案例，当时处于初学阶段，在 CSDN 上也未找到通俗易懂的教程，故决定自己写一篇。希望能对读者有所启示！

        本人基础：HTML、CSS、JS基础语法

二、用 JS 制作轮播图

        我们以长虹官网为例

        我们来试着复刻下轮播图效果（浮于轮播图上方的侧导航栏我们就不做了，主要是做轮播图效果） （读者不用复制中间代码，文章结尾我会附上完整源码，请耐心阅读哦~）

        先用通配符选择器清除默认样式，再把大盒子画好并设置简单的样式以便于后续操作

/* CSS 代码 */
/* 清除默认样式 */
* {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

li {
      list-style: none;
    }

.box {
      margin: 100px auto;
      width: 1920px;
      height: 500px;
      background-color: pink; /* 设置背景色，使其可视化便于后续操作 */
    }

<!-- HTML 代码-->
<div class="box"></div>

         对了，记得获取轮播图图片的源地址哦：在官网用开发者工具检查得到几个图片的地址，为了读者方便我这里就直接附上了（不区分先后顺序）：

https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830345829203574.jpg
https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830346288764047.jpg
https://images.changhong.com/chgw/gwsy/lbdt/202308/W020241224545386324901.jpg
https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830344455786290.jpg

         好，那我们继续写代码吧！

        在盒子里插入图片并设置宽高尺寸（默认铺满盒子了的，这里可以不用设置）

<div class="box">
    <img src="https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830345829203574.jpg" alt="">
  </div>

         嘿嘿嘿！你以为 HTML 代码就完了么？NoNoNo，图片右下角的几个园点呢？我们用什么来实现呢？先分析 ul 标签，显然是不行的，但可别忘了还有 ol 标签哦！我们在里面放上点儿测试文字以便观察

<div class="box">
    <img src="https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830345829203574.jpg" alt="">
    <ol>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ol>
</div>

         好，接下来用flex和relative来设置圆点在图片右下角（具体尺寸我没参照官网，大致做的）

.box {
      position: relative;
      margin: 100px auto;
      width: 1920px;
      height: 500px;
      background-color: pink;
    }

    ol {
      display: flex;
      position: absolute;
      bottom: 30px;
      right: 400px;
    }

        添加背景色将圆点画出来，清除测试文字，并设置圆点样式 

ol li {
      margin-left: 15px;
      width: 8px;
      height: 8px;
      border-radius: 8px;
      background-color: rgba(255, 255, 255, 0.7);
    }

        这里再把激活后的圆点样式写出来

ol li.active {
      background-color: #F12020; /* 激活状态的颜色 */
    }

        别忘了轮播图在显示时对应的的圆点有激活状态，这个我们后续通过 JS 来实现！

        整体 HTML + CSS 部分我们就做好了，接下来进入重点的 JS 环节

三、JS 部分

        轮播图的底层逻辑是通过遍历内容是对象的数组来完成的，下面为我自己的解决思路

       1.轮播图

        先附上代码再解释：

const arr = [
          {url:'https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830345829203574.jpg'},
      {url:'https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830346288764047.jpg'},
      {url:'https://images.changhong.com/chgw/gwsy/lbdt/202308/W020241224545386324901.jpg'},
      {url:'https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830344455786290.jpg'}
]

const img = document.querySelector('.box img')  // 获取img对象

let index = 0 // 设置图片下标

function ChangImg() {
  img.src = arr[index].url
  index = (index + 1) % arr.length
  console.log(img.src);  // 在控制台打印简单测试
}
setInterval(ChangImg, 1000) // 定时函数控制换图，第二个参数表示时间 

       来简单解释下：
       1）变量的声明：

        我们通过把图片的url作为属性放进一个个对象里，再把这些对象放进一个一个数组中，后续我们想方设法通过遍历数组来实现切图，同时我们初始化一个值为零的变量 index 来存储数组下标（一定是在函数外声明，在函数内声明无法实现遍历，因为后面定时函数将刷新 index 的值）

        2）函数的定义：

        我们先通过 document.querySelector 函数准确定位到我们要处理的标签img，并赋值给一个变量（我们也起名img），后续通过修改这个图片的 src 来实现切图。为此，我们定义一个函数用于实现切图，通过赋值语句 img.src = arr[index].url 来实现换图片的 src 值，从而达到换图效果。在完成换图后，记得要修改 index 的值哦，这里我们只能用求余的方式来更新索引（读者若用 index++ 和if来进行修改也行，只是我个人认为我的方法效率高些）

        3）setInterval函数的调用来进行定时换图

        这个就没什么好解释的了，在最后别忘了控制小圆点也切换，这里我们同样在刚才定义的函数里实现。

        2.小圆点

const arr = [
      {url:'https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830345829203574.jpg'},
      {url:'https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830346288764047.jpg'},
      {url:'https://images.changhong.com/chgw/gwsy/lbdt/202308/W020241224545386324901.jpg'},
      {url:'https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830344455786290.jpg'}
    ]

    const img = document.querySelector('.box img')  // 获取img对象
    const lis = document.querySelectorAll('ol li')
    console.log(lis);
    

    let index = 0 // 设置图片下标
    lis[index].classList.add('active'); // 第一张图的圆点默认激活

    function ChangImg() {
      lis.forEach(li => li.classList.remove('active')); // 清除所有小圆点的激活状态
      img.src = arr[index].url  // 处理图片
      lis[index].classList.add('active')  // 点亮当前圆点
      index = (index + 1) % arr.length  // 更新索引
    }

    setInterval(ChangImg, 1000)

         最后附上完整源码

<!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>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .box {
      position: relative;
      margin: 100px auto;
      width: 1920px;
      height: 500px;
      background-color: pink;
    }

    ol {
      display: flex;
      position: absolute;
      bottom: 30px;
      right: 400px;
    }

    ol li {
      margin-left: 15px;
      width: 8px;
      height: 8px;
      border-radius: 8px;
      background-color: rgba(255, 255, 255, 0.7);
    }
    

    ol li.active {
      background-color: #F12020; /* 激活状态的颜色 */
    }

  </style>
</head>
<body>
  <div class="box">
    <img src="https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830345829203574.jpg" alt="">
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
  <script>
    const arr = [
      {url:'https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830345829203574.jpg'},
      {url:'https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830346288764047.jpg'},
      {url:'https://images.changhong.com/chgw/gwsy/lbdt/202308/W020241224545386324901.jpg'},
      {url:'https://images.changhong.com/chgw/gwsy/lbdt/202408/W020240830344455786290.jpg'}
    ]

    const img = document.querySelector('.box img')  // 获取img对象
    const lis = document.querySelectorAll('ol li')
    console.log(lis);
    

    let index = 0 // 设置图片下标
    lis[index].classList.add('active'); // 第一张图的圆点默认激活

    function ChangImg() {
      lis.forEach(li => li.classList.remove('active')); // 清除所有小圆点的激活状态
      img.src = arr[index].url  // 处理图片
      lis[index].classList.add('active')  // 点亮当前圆点
      index = (index + 1) % arr.length  // 更新索引
    }

    setInterval(ChangImg, 1000)

  </script>
</body>
</html>

四、结语

        感谢您的观看，同时希望您可以点赞、收藏以及关注支持一下，您的支持与喜爱是激励我继续写下去的最大动力！！！

        后续还会有更多精彩内容，关注我，精彩不迷路~