轮播图

功能：

可控制是否自动轮播

左右箭头切换上一张，下一张，节流处理
鼠标放到箭头上，图片停止自动轮播，鼠标移开接着继续播放
点击小微缩图可跳转到对应顺序的图片
文字数字随着图片轮播滚动改变

思路

手动轮播
- 单击下方的缩略图
- 当前被单击的缩略图高亮
- 文本描述需要动态变化
- 让大图相应的变化
- 上一张和下一张
手动轮播
- 自动轮播的本质是手动轮播，实现方式就是在定时器间隔指定的时间，调用 “下一张” 按钮的单击事件
- 鼠标进入图片区域，停止轮播
- 鼠标移出之后，重新开启定时器

源码

手动轮播

window.addEventListener('load', function () {
    // 获取元素
    // - 缩略图--标记，我们要为其添加单击事件   
    let indicators = document.querySelectorAll('.indicator li')
    // 文本描述信息，单击之后
    let desc = document.querySelector('.extra > h3')
    let slides = document.querySelectorAll('.slides li')
    let next = document.querySelector('.extra > .next')
    let prev = document.querySelector('.extra > .prev')
    let main = document.querySelector('.main')
    console.log(indicators, desc, slides);

    let index = 0
    // 伪数组遍历
    indicators.forEach(function (ele, i) {
        // 绑定事件
        ele.addEventListener('click', function () {
            // 1.让当前被单击的缩略图，添加高亮样式--样式类名操作
            // 1.1 找到缩略图中有active样式的元素，将其active样式移除
            document.querySelector('.indicator .active').classList.remove('active')
            // 为当前被单击的缩略图元素添加active样式
            ele.classList.add('active')

            // 2.修改文本描述信息
            desc.innerText = `第${i + 1}张图的描述信息`

            // 3.显示对应的大图
            // 3.1 之前有active样式的大图元素，移除active样式
            document.querySelector('.slides .active').classList.remove('active')
            // 3.2 为对应索引位置的大图添加active样式
            slides[i].classList.add('active')
        })
    })
    // 下一张
    next.addEventListener('click', function () {
        index++
        //
        if (index >= indicators.length) {
            index = 0
        }
        indicators[index].click()
    })
    // 上一张
    prev.addEventListener('click', function () {
        index--
        if (index >= indicators.length - 1) {
            index = 0
        }
        indicators[index].click()
    })

自动轮播清除和开启定时器

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

    })

})

js原生普通轮播图

轮播图

功能：

思路

源码