定时轮播图

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>

 

js部分：

  const sliderData = [

      { url: './images/01.jpg', title: '第一张轮播图描述', color: 'rgb(100, 67, 68)' },

      { url: './images/02.jpg', title: '第二张轮播图描述', color: 'rgb(43, 35, 26)' },

      { url: './images/03.jpg', title: '第三张轮播图描述', color: 'rgb(36, 31, 33)' },

      { url: './images/04.jpg', title: '第四张轮播图描述', color: 'rgb(139, 98, 66)' },

      { url: './images/05.jpg', title: '第五张轮播图描述', color: 'rgb(67, 90, 92)' },

      { url: './images/06.jpg', title: '第六张轮播图描述', color: 'rgb(166, 131, 143)' },

      { url: './images/07.jpg', title: '第七张轮播图描述', color: 'rgb(53, 29, 25)' },

      { url: './images/08.jpg', title: '第八张轮播图描述', color: 'rgb(99, 72, 114)' },

    ]

    const img = document.querySelector('.slider-wrapper img')

    const p = document.querySelector('.slider-footer p')

    let i = 0  // 信号量 控制图片的张数

    // 开启定时器

    setInterval(function () {

      i++

      // 衔接位置  一共八张图片，到了最后一张就是 8， 数组的长度就是 8

      if (i >= sliderData.length) {

        i = 0

      }

      // 更换图片路径  

      img.src = sliderData[i].url

      // 修改 p里面的文字描述

      p.innerHTML = sliderData[i].title

      // 小圆点

      // 先删除以前的active

      document.querySelector('.slider-indicator .active').classList.remove('active')

      // 更换当前li为active的li

      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')

    }, 1000)