需求:

1.点击下方的小图片时,上方栏目的图片也对应下方的下标进行图片变换,中间的文字描述对应的第几张图片
2.点击中间的左右两个箭头,进行图片上一张下一张切换,由于上下两个事件都是独立事件无法交互使用,要让他们准确判断此时正在选择的图片,然后继续进行事件交互同步使用.
3.化繁为简将重复的代码使用函数封装起来然后再设置好形参调用到上面的事件中
- 点开网页时图片自动下一张循环切换,设置定时器.
- 鼠标经过整个轮播图时图片停止切换(删除定时器)
- 鼠标移开时轮播图继续行动 (定时器重新创建)

步骤一

使用排他思想,注册事件,鼠标经过下方某张图片时,上下两个栏目的元素添加类active,其他兄弟移除类active.给h3内部的文字进行更换提醒这是第几张图片

      let slidesList = document.querySelectorAll('.slides li')
      let indicatorList = document.querySelectorAll('.indicator li')
      let main = document.querySelector('.main') //整个父盒子
      let message = document.querySelector('.extra>h3') //图片标题
      
      for (let i = 0; i < indicatorList.length; i++) {
       indicatorList[i].onmouseenter = function () {
       document.querySelector('.slides .active').classList.remove('active')
       document.querySelector('.indicator .active').classList.remove('active')
       indicatorList[i].classList.add('active')
       slidesList[i].classList.add('active')

       message.innerHTML = `第${i + 1}张图的描述信息`
       
        index = i // 获取当前的下标 赋值给变量index 让下面的事件判断此时的图片所在下标
      }

    }

步骤二

注册两个事件切换上一张和下一张图片
- 对于 '上一张' 的按钮如果当前是第一张图片将此此时的下标变成0 否则下标自减
- 对于 '下一张' 的按钮如果当前是最后一张图片将此此时的下标变成数组长度 - 1, 否则下标自增
  注意: 由于这样设置的事件和上面注册的事件时互相独立的为了能够交互需要设置一个变量取上面事件结束后的下标值.

    let prev = document.querySelector('.prev')  // 上一张
    let next = document.querySelector('.next')  // 下一张
    let index = 0 // 下标变量
    prev.onclick = function () {
      index == 0 ? index = indicatorList.length - 1 : index--
      document.querySelector('.slides .active').classList.remove('active')
      document.querySelector('.indicator .active').classList.remove('active')
      indicatorList[index].classList.add('active')
      slidesList[index].classList.add('active')
      message.innerHTML = `第${index + 1}张图的描述信息`
    }

    next.onclick = function () {
      index == indicatorList.length - 1 ? index = 0 : index++

      document.querySelector('.slides .active').classList.remove('active')
      document.querySelector('.indicator .active').classList.remove('active')
      indicatorList[index].classList.add('active')
      slidesList[index].classList.add('active')
      message.innerHTML = `第${index + 1}张图的描述信息`
    }

步骤三

将重复的代码使用函数包装起来加入形参然后调入其他代码中引入相应实参

function flower(i) {
      document.querySelector('.slides .active').classList.remove('active')
      document.querySelector('.indicator .active').classList.remove('active')
      indicatorList[i].classList.add('active')
      slidesList[i].classList.add('active')

      message.innerHTML = `第${i + 1}张图的描述信息`
    }

简化后的代码

      let slidesList = document.querySelectorAll('.slides li')
      let indicatorList = document.querySelectorAll('.indicator li')
      let main = document.querySelector('.main') //整个父盒子
      let message = document.querySelector('.extra>h3') //图片标题
      let prev = document.querySelector('.prev')  // 上一张
      let next = document.querySelector('.next')  // 下一张
      let index = 0 // 下标变量
      
      for (let i = 0; i < indicatorList.length; i++) {
      
       flower(i)
       
        index = i // 获取当前的下标 赋值给变量index 让下面的事件判断此时的图片所在下标
      }

    }
    
    prev.onclick = function () {
      index == 0 ? index = indicatorList.length - 1 : index--

      flower(index)
    }

    next.onclick = function () {
      index == indicatorList.length - 1 ? index = 0 : index++

      flower(index)
    }

步骤四

 // 4.定时器 建立 自动轮播图  鼠标经过时 删除定时器  移开时重新创建  不要再使用let 创建定时器 就使用同一个 
 // 不然的话 因为作用域的关系 两个定时器是独立的函数事件 无法删除所有
    let id = setInterval(function () {
      next.onclick()
    }, 1000)

    main.onmouseenter = function () {
      clearInterval(id)
    }

    main.onmouseleave = function () {
      id = setInterval(function () {
        next.onclick()  // 函数事件调用
      }, 1000)
    }

js 轮播图实现思想

需求:

步骤一

步骤二

步骤三

步骤四