前端入门 原生js实现轮播图 - 基础版

前言

工作以来，现在的前端基本就是会用工具就行，不管是vue还是react，他们都有很多的库，确实方便了开发，也提高了工作效率。但是工具用久了，可能连一些基本的前端都搞忘了，因为太久没有写了。
轮播图是前端入门的必经之路，单论轮播图来说，就有很多种实现方式，今天就写一个最基础的实现方式。

效果图

Video_2024-07-18_221949

实现

直接上代码
###HTML

<div class="wrapper">
    <div class="container">
      <!-- 轮播内容 -->
      <div class="content bg_1 action">1</div>
      <div class="content bg_2">2</div>
      <div class="content bg_3">3</div>
      <div class="content bg_4">4</div>
      <!-- 前后翻页 -->
      <div class="prev">&lt;</div>
      <div class="next">&gt;</div>
      <!-- 提示 -->
      <div class="circle">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>

###CSS

<style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrapper {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      width: 960px;
      height: 360px;
      position: relative;
    }

    .content {
      width: 100%;
      height: 100%;
      color: #fff;
      text-align: center;
      line-height: 360px;
      font-size: 36px;
      font-weight: bold;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity .3s linear;
    }

    .action {
      opacity: 1;
    }

    .bg_1 {
      background-color: slateblue;
    }

    .bg_2 {
      background-color: salmon;
    }

    .bg_3 {
      background-color: seagreen;
    }

    .bg_4 {
      background-color: skyblue;
    }

    .prev,
    .next {
      width: 24px;
      height: 24px;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
      text-align: center;
      background-color: rgba(0, 0, 0, .3);
      position: absolute;
      top: 50%;
    }

    .prev {
      left: 24px;
    }

    .next {
      right: 24px;
    }

    .circle {
      width: 100%;
      padding: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 24px;
    }

    .circle span {
      display: inline-flex;
      width: 24px;
      height: 24px;
      background-color: #f3f5f7;
      border-radius: 12px;
      margin: 0 8px;
      cursor: pointer;
      transition: width .3s linear;
    }

    .circle .active {
      width: 48px;
      background-color: yellowgreen;
    }
  </style>

###JavaScript

 <script>
    let timer = 0;
    // 定义当前值
    let curIndex = 0;
    // 获取需要操作的dom元素
    const doms = {
      cDoms: document.querySelectorAll('.content'),
      pDom: document.querySelector('.prev'),
      nDom: document.querySelector('.next'),
      sDoms: document.querySelectorAll('.circle span'),
    }

    doms.pDom.addEventListener('click', () => {
      // stopMove();
      curIndex--
      if (curIndex < 0) {
        curIndex = 3;
      }
      filterIndex(curIndex)
    })

    doms.nDom.addEventListener('click', () => {
      // stopMove();
      curIndex++
      if (curIndex > 3) {
        curIndex = 0;
      }
      filterIndex(curIndex)
    })

    doms.sDoms.forEach((item, index) => {
      item.addEventListener('click', () => {
        curIndex = index
        filterIndex(index)
      })
    })

    // filterIndex
    function filterIndex(curIndex) {
      doms.cDoms.forEach((item, index) => {
        if (curIndex === index) {
          item.classList.add('action')
        } else {
          item.classList.remove('action')
        }
      });
      doms.sDoms.forEach((item, index) => {
        if (curIndex === index) {
          item.classList.add('active')
        } else {
          item.classList.remove('active')
        }
      })
    }

    function startMove() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        curIndex++
        if (curIndex > 3) {
          curIndex = 0;
        }
        filterIndex(curIndex)
      }, 2000)
    }

    function stopMove() {
      clearInterval(timer);
    }

    startMove()

    filterIndex(curIndex)
  </script>

以上便是一个基础版的轮播的HTML、CSS、Javascript的代码。该轮播图是通过定位在一起，然后通过 opacity: 0; 来控制显示当前页。也可以将 opacity: 0; 换成 display: none、z-index等来实现，然后通过 transition: opacity .3s linear; 实现过度，显得没有那么生硬。filterIndex()这个方法接收一个索引值，也就是当前需要显示的值。 如果想要轮播自己动起来，可以调用 startMove() 这个方法，这个方法通过 setInterval 实现。

总结

实现轮播图的方式多种多样，可以根据具体的需求、性能等方面考虑，然后选择合适的方法实现。以上是一个入门级的基本版本，适合新手练习。如果想练习更多高级轮播图，可以尝试无缝轮播。后面我也会自己写一下无缝轮播的实现。
最后上源码

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

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

    .wrapper {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      width: 960px;
      height: 360px;
      position: relative;
    }

    .content {
      width: 100%;
      height: 100%;
      color: #fff;
      text-align: center;
      line-height: 360px;
      font-size: 36px;
      font-weight: bold;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity .3s linear;
    }

    .action {
      opacity: 1;
    }

    .bg_1 {
      background-color: slateblue;
    }

    .bg_2 {
      background-color: salmon;
    }

    .bg_3 {
      background-color: seagreen;
    }

    .bg_4 {
      background-color: skyblue;
    }

    .prev,
    .next {
      width: 24px;
      height: 24px;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
      text-align: center;
      background-color: rgba(0, 0, 0, .3);
      position: absolute;
      top: 50%;
    }

    .prev {
      left: 24px;
    }

    .next {
      right: 24px;
    }

    .circle {
      width: 100%;
      padding: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 24px;
    }

    .circle span {
      display: inline-flex;
      width: 24px;
      height: 24px;
      background-color: #f3f5f7;
      border-radius: 12px;
      margin: 0 8px;
      cursor: pointer;
      transition: width .3s linear;
    }

    .circle .active {
      width: 48px;
      background-color: yellowgreen;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="container">
      <!-- 轮播内容 -->
      <div class="content bg_1 action">1</div>
      <div class="content bg_2">2</div>
      <div class="content bg_3">3</div>
      <div class="content bg_4">4</div>
      <!-- 前后翻页 -->
      <div class="prev">&lt;</div>
      <div class="next">&gt;</div>
      <!-- 提示 -->
      <div class="circle">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>

  <script>
    let timer = 0;
    // 定义当前值
    let curIndex = 0;
    // 获取需要操作的dom元素
    const doms = {
      cDoms: document.querySelectorAll('.content'),
      pDom: document.querySelector('.prev'),
      nDom: document.querySelector('.next'),
      sDoms: document.querySelectorAll('.circle span'),
    }

    doms.pDom.addEventListener('click', () => {
      // stopMove();
      curIndex--
      if (curIndex < 0) {
        curIndex = 3;
      }
      filterIndex(curIndex)
    })

    doms.nDom.addEventListener('click', () => {
      // stopMove();
      curIndex++
      if (curIndex > 3) {
        curIndex = 0;
      }
      filterIndex(curIndex)
    })

    doms.sDoms.forEach((item, index) => {
      item.addEventListener('click', () => {
        curIndex = index
        filterIndex(index)
      })
    })

    // filterIndex
    function filterIndex(curIndex) {
      doms.cDoms.forEach((item, index) => {
        if (curIndex === index) {
          item.classList.add('action')
        } else {
          item.classList.remove('action')
        }
      });
      doms.sDoms.forEach((item, index) => {
        if (curIndex === index) {
          item.classList.add('active')
        } else {
          item.classList.remove('active')
        }
      })
    }

    function startMove() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        curIndex++
        if (curIndex > 3) {
          curIndex = 0;
        }
        filterIndex(curIndex)
      }, 2000)
    }

    function stopMove() {
      clearInterval(timer);
    }

    startMove()

    filterIndex(curIndex)
  </script>
    
</body>

</html>