原生js封装定时轮播图Demo

效果图：

实现思路：

1.获取一堆dom元素

2.给按钮绑定点击事件

3.在点击事件的处理函数中编写业务

4.点击一次下标变量++

5.判断范围,控制范围

6.根据下标播放图片

7.设置点击小圆点也能切换的功能

完整代码：

html——>

<div class="slider">
      <div class="slider-wrapper">
        <img src="./images/slider01.jpg" alt="" />
      </div>
      <div class="slider-footer">
        <p>奔涌吧，后浪！</p>
        <ul class="slider-indicator">
          <li class="active"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <div class="toggle">
          <button class="prev">&lt;</button>
          <button class="next">&gt;</button>
        </div>
      </div>
    </div>

css——>

* {
        box-sizing: border-box;
      }

      .slider {
        width: 560px;
        height: 400px;
        overflow: hidden;
      }

      .slider-wrapper {
        width: 100%;
        height: 320px;
      }

      .slider-wrapper img {
        display: block;
        width: 100%;
        height: 100%;
      }

      .slider-footer {
        position: relative;
        height: 80px;
        padding: 12px 12px 0 12px;
        background-color: rgb(37, 41, 60);
      }

      .slider-footer .toggle {
        display: flex;
        position: absolute;
        right: 0;
        top: 12px;
      }

      .slider-footer .toggle button {
        width: 28px;
        height: 28px;
        margin-right: 12px;
        appearance: none;
        border: none;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
      }

      .slider-footer .toggle button:hover {
        background: rgba(255, 255, 255, 0.2);
      }

      .slider-footer p {
        margin: 0;
        margin-bottom: 10px;
        color: #fff;
        font-size: 18px;
      }

      .slider-indicator {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
        align-items: center;
      }

      .slider-indicator li {
        width: 8px;
        height: 8px;
        margin: 4px;
        border-radius: 50%;
        background: #fff;
        opacity: 0.4;
        cursor: pointer;
      }

      .slider-indicator li.active {
        width: 12px;
        height: 12px;
        opacity: 1;
      }

js——>

// 初始数据
      const sliderData = [
        {
          url: "./images/slider01.jpg",
          title: "奔涌吧，后浪！",
          color: "rgb(37, 41, 60)",
        },
        {
          url: "./images/slider02.jpg",
          title: "开启剑与雪的黑暗传说！",
          color: "rgb(43, 35, 26)",
        },
        {
          url: "./images/slider03.jpg",
          title: "八年的怀旧游戏",
          color: "rgb(47, 23, 100)",
        },
        {
          url: "./images/slider04.jpg",
          title: "真正的jo厨出现了！",
          color: "rgb(36, 31, 33)",
        },
        {
          url: "./images/slider05.jpg",
          title: "让世界通过B站看到东方大国文化",
          color: "rgb(58, 91, 216)",
        },
        {
          url: "./images/slider06.jpg",
          title: "快来分享你的寒假日常吧~",
          color: "rgb(67, 90, 92)",
        },
        {
          url: "./images/slider07.jpg",
          title: "哔哩哔哩小年YEAH",
          color: "rgb(166, 131, 143)",
        },
        {
          url: "./images/slider08.jpg",
          title: "一站式解决你的电脑配置问题！！！",
          color: "rgb(53, 29, 25)",
        },
      ];
          /*  
     1.获取一堆dom元素
     2.给按钮绑定点击事件
     3.在点击事件的处理函数中编写业务
     4.点击一次下标变量++
     5.判断范围,控制范围
     6.根据下标播放图片
     7.设置点击小圆点也能切换的功能
      */

        //获取元素
    const img=document.querySelector(".slider-wrapper img");
    const p=document.querySelector(".slider-footer p");
    const sliderFooter=document.querySelector(".slider-footer");
    const liArr=document.querySelectorAll(".slider-indicator li");
    const prev=document.querySelector(".toggle .prev");
    // console.log(prev);
    const next=document.querySelector(".toggle .next");
    // console.log(next);
    const slider=document.querySelector(".slider");

    //给下标赋值为0
    let i=0;
    //将公共代码进行封装，方便多处调用
    function name() {
      img.src=sliderData[i].url;
      p.innerText=sliderData[i].title;
      sliderFooter.style.backgroundColor=sliderData[i].color;
      //找到需要移除高亮的标签，原页面第一个需要提前设置好高亮
      const beforeLi=document.querySelector("li.active")
      //移除前面一个li的高亮效果
      beforeLi.classList.remove("active");
      //设置高亮递进
      liArr[i].classList.add("active");
      
    }
    //向右按钮
    next.addEventListener('click',function () {
      i++;
      
      if (i>=sliderData.length) {
        i=0;
      }
      // i=i%liderData.length;
      name()
    })
    //向左按钮
    prev.addEventListener('click',function () {
      i--;
      if (i<=0) {
        i=sliderData.length-1;
      }
      // i=(i+liderData.length)%liderData.length;
      name()
    })

    //定时器
    let timer=setInterval(function(){
      next.click()
      name()
    },1000)

    //鼠标经过，停止定时器
    slider.addEventListener('mouseenter',function () {
      clearInterval(timer)
    })
    
    //鼠标离开，恢复定时器
    slider.addEventListener('mouseleave',function () {
      timer=setInterval(function(){
      next.click()
      name()
    },1000)
    })

    //鼠标点击小圆点进行切换
    //给小圆点设置循环来获取每一个小圆点
    for (let j = 0; j < liArr.length; j++) {
      //给每一个小圆点绑定点击事件
      liArr[j].addEventListener('click',function () {
        //调用功能函数
        i=j;
        name()
      })
      
    }