js简单的轮播类名切换

 <style>

      .box {

        margin: 0 auto;

        width: 1000px;

        height: 500px;

      }



      .top {

        width: 1000px;

        height: 500px;

        background: url(./1.webp) no-repeat;

        position: relative;

      }



      .bot {

        width: 1000px;

        height: 100px;

        background: rgb(100, 67, 68);

        margin-top: -16px;

        text-align: center;

        color: #fff;

        font-weight: 600;

        padding: 10px 0;

      }



      ul li {

        float: left;

        border-radius: 50%;

        width: 20px;

        height: 20px;

        background: #fff;

        margin: 10px 10px;

        list-style: none;

      }



      .active {

        transform: scale(1.2);

        background: red;

      }

      .cen .lef {

        position: absolute;

        top: 300px;

        left: 200px;

        width: 40px;

        height: 50px;

        background: #ccc;

        text-align: center;

        padding-bottom: -40px;

        font-size: 40px;

        color: azure;

      }

      .cen .rgh {

        position: absolute;

        top: 300px;

        right: 200px;

        width: 40px;

        height: 50px;

        background: #ccc;

        text-align: center;

        padding-bottom: -40px;

        font-size: 40px;

        color: azure;

      }

    </style>

  <div class="box">

      <div class="top"></div>

      <div class="cen">

        <div class="lef"><</div>

        <div class="rgh">></div>

      </div>

      <div class="bot">

        <p>对人类来说太超前了？</p>

        <ul>

          <li class="active"></li>

          <li></li>

          <li></li>

          <li></li>

          <li></li>

        </ul>

      </div>

    </div>

 <script>

//定一个数据

      let arr = [

        {

          img: "./1.webp",

          title: "对人类来说太超前了？",

          color: "rgb(100,67,68",

        },

        {

          img: "./2.webp",

          title: "开启剑与雪黑暗传说！",

          color: "rgb(43,35,26",

        },

        { img: "./3.webp", title: "真正的大厨出现了！", color: "rgb(36,31,33" },

        { img: "./4.webp", title: "东北哈尔滨大世界", color: "rgb(139,98,96" },

        { img: "./5.webp", title: "南瓜小土豆", color: "rgb(166,131,143" },

      ];

//封装一个获取元素的方法

      function getEl(el) {

        return document.querySelector(el);

      }

      let box = getEl(".box");

      let tt = getEl(".top");

      let tex = getEl(".bot p");

      let bot = getEl(".bot");

      let prev = getEl(".lef");

      let next = getEl(".rgh");

//记录从第0张开始

      let n = 0;

      //上一张

      prev.addEventListener("click", function () {

      //n=0的时候让说明n是第一张，让n等于数据的长度

        if (n === 0) {

          n = arr.length;

        }

    //让n-- 从数据长度第一张开始--

        n--;

        tt.style.background = `url(./${arr[n].img})`;

        tex.innerHTML = arr[n].title;

        bot.style.background = `${arr[n].color}`;

//获取带有active类的标签并且把类名删除

        document.querySelector("ul .active").classList.remove("active");

//找到第二个li加类名

        document

          .querySelector(`ul li:nth-child(${n + 1})`)

          .classList.add("active");

      });

      //下一张

      next.addEventListener("click", function () {

        n++;

        if (n === arr.length) {

          n = 0;

        }

        tt.style.background = `url(./${arr[n].img})`;

        tex.innerHTML = arr[n].title;

        bot.style.background = `${arr[n].color}`;

        document.querySelector("ul .active").classList.remove("active");

        document

          .querySelector(`ul li:nth-child(${n + 1})`)

          .classList.add("active");

      });

      //定时器让图片自动轮播

      let tim = setInterval(function () {

        next.click();

      }, 1000);

      //鼠标划入定时器停止

      box.addEventListener("mouseenter", function () {

        clearInterval(tim);

      });

      //划出重新开启定时器

      box.addEventListener("mouseleave", function () {

        if (tim) clearInterval(tim);

        tim = setInterval(function () {

          next.click();

        }, 1000);

      });

//获取所有的小圆点

      let list = document.querySelectorAll("ul li");

//循环遍历所有的小圆点

      for (let i = 0; i < list.length; i++) {

        list[i].addEventListener("click", function () {

          tt.style.background = `url(./${arr[i].img})`;

          tex.innerHTML = arr[i].title;

          bot.style.background = `${arr[i].color}`;

          document.querySelector("ul .active").classList.remove("active");

          document

            .querySelector(`ul li:nth-child(${i + 1})`)

            .classList.add("active");

        });

      }

    </script>