【无标题】

mouseenter 监听鼠标是否移入 DOM 元素

mouseleave 监听鼠标是否移出 DOM 元素

这两个vsc中不会有提示，要注意书写

以下是我最近以来写的最长的一个轮播图案例了，写的时候也出了不少小毛病，特此记录一下

<script>

    // 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 p = document.querySelector('.slider-footer p')

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

    // 右侧按钮

    const next = document.querySelector('.next')

    let i = 0

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

      i++

      if(i >= 8){

        i = 0

      }

      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')

    })

     // 左侧按钮

     const prev = document.querySelector('.prev')

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

      i--

      if(i < 0){

        i = sliderData.length-1

      }

      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')

    })

      // 声明函数

      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')

       

      }

      // 自动播放

      let timerId = setInterval(function () {

        next.click()

      },1000)

      const slider = document.querySelector('.slider')

      slider.addEventListener('mouseenter', function(){

        clearInterval(timerId)

      })

      slider.addEventListener('mouseenter', function(){

        clearInterval(timerId)

        // 开启定时器

        timerId = setInterval(function () {

        next.click()

      },1000)

      })

     

  </script>