JS代码

// 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]

    //获取图片
    const img = document.querySelector('.slider-wrapper img')
    //获取图片底部
    const footer = document.querySelector('.slider-footer')
    //获取标题
    const p = document.querySelector('.slider-footer p')
    //获取下一个按钮
    const next = document.querySelector('.next')
    //获取上一个按钮
    const prev = document.querySelector('.prev')
    //获取整个轮播图盒子
    const slider = document.querySelector(".slider")
  
    //设置一个定时器
    let timer = setInterval(function(){
      //利用间歇函数执行模拟点击事件
      next.click()
    },3000)
  
    let i = 0
    //下一个点击事件
    next.addEventListener('click',function(){
      i++
      //当数据到最后一个回到第一个
      if(i >= sliderData.length){
        i = 0
      }
      toggle()
    })
  
    prev.addEventListener('click',function(){
      i--
      //当数据到最第一个回到最后一个
      if(i < 0){
        i = sliderData.length-1
      }
      //执行切换函数
     toggle()
    })

    //更换轮播图内容
    function toggle() {
      img.src = sliderData[i].url
      p.innerHTML = sliderData[i].title
      footer.style.backgroundColor = sliderData[i].color
      document.querySelector('.slider-indicator .active').classList.remove('active')
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
  
    }
    //鼠标移到整个轮播图盒子清除定时器
    slider.addEventListener('mouseenter',function(){
      clearInterval(timer)
    })
    //鼠标移出整个轮播图盒子开启定时器
    slider.addEventListener('mouseleave',function(){
      clearInterval(timer)
      timer = setInterval(function(){
      next.click()
    },3000)
    })