三：轮播图

主要是进行图片的切换
我们要定义一个索引值
实现循环轮播
获取必要的元素：缩略图大图图片信息
为缩略图添加单击事件
1.切换缩略图的样式 -- 排他思想
2.切换对应的大图的样式 -- 排他思想
3.设置图片信息 主要是进行图片的切换

// 获取元素
// 缩略图
let indicators = document.querySelectorAll('.indicator li')
// 大图
let slides = document.querySelectorAll('.slides li')
// 图片信息
let info = document.querySelector('.extra > h3')
// 下一张
let next = document.querySelector('.next')
// 上一张
let prev = document.querySelector('.prev')
// 获取整个轮播图区域
let main = document.querySelector('.main')
// 1.单击缩略图进行图片切换
indicators.forEach(function(ele, index) {
    // 为所有缩略图绑定单击事件(事件类型你随意)
    ele.addEventListener('click', function() {
        // 1.1.切换缩略图的样式 -- 排他思想
        document.querySelector('.indicator li.active').classList.remove('active')
        // this.classList.add('active')
        ele.classList.add('active')
        // 1.2.切换对应的大图的样式 -- 排他思想
        document.querySelector('.slides li.active').classList.remove('active')
        slides[index].classList.add('active')
        // 1.3.设置图片信息
        info.innerText = `第${index + 1}张图的描述信息`
        // 1.4 为了能够让上下张和缩略图单击切换时的索引一致，我们需要在单击之后将上下张和下一张所使用的索引进行重置
        imgIndex = index
    })
})

下一张

主要是需要一个变量来记录当前是第几张

功能

1.缩略图样式切换

2.大图样式要切换

3.图片信息要改变

// 2.下一张
next.addEventListener('click', function() {
    // 让图片索引+1
    imgIndex++
    // 如果索引越界，就应该回到和第0张，实现循环轮播
    if (imgIndex > indicators.length - 1) {
        imgIndex = 0
    }
    // 1.缩略图样式切换
    // 2.大图样式要切换
    // 3.图片信息要改变
    indicators[imgIndex].click()
})

上一张

// 3.上一张
prev.addEventListener('click', function() {
    // 让图片索引-1
    imgIndex--
    if (imgIndex < 0) {
        imgIndex = indicators.length - 1
    }
    indicators[imgIndex].click()
})

实现循环轮播-自动轮播

// 自动轮播的本质是手动轮播，实现方式就是在定时器间隔指定的时间，调用 “下一张” 按钮的单击事件

  //             设置间隔
 let timeId = setInterval(function () {
        next.click()
      }, 1000)

      // 3.2鼠标进入到轮播图区域，停止定时器
      main.addEventListener('mouseenter', function () {
        clearInterval(timeId)
      })
      // 3.3鼠标移出之后，重新开启定时器
      main.addEventListener('mouseleave', function () {
        timeId = setInterval(function () {
          next.click()
        }, 1000)
      })
 })

Webapi-案例（轮播图）

三：轮播图

下一张

上一张