JavaScript练手小技巧：利用鼠标滚轮控制图片轮播

近日，在浏览网站的时候，发现了一个有意思的效果：一个图片轮播，通过上下滚动鼠标滚轮控制图片的上下切换。

于是就有了自己做一个的想法，顺带复习下鼠标滚轮事件。

鼠标滚轮事件，参考这篇文章：鼠标滚轮事件-CSDN博客

一、HTML和CSS

无论怎么样的滚动，首先要制作图片轮播的结构和样式。

HTML：

<div class="box" id="box">
    <ul class="list" id="list">
        <li><img src="../images/pic1.jpg" alt=""></li>
        <li><img src="../images/pic2.jpg" alt=""></li>
        <li><img src="../images/pic3.jpg" alt=""></li>
        <li><img src="../images/pic4.jpg" alt=""></li>
        <li><img src="../images/pic5.jpg" alt=""></li>
    </ul>   
    <div class="dots" id="dots"></div>
</div>

HTML结构很简单，就是一个 div 里面套了两个结构：图片区和控制点区。

• 图片区 ul#list，就是一个 ul，里面有多个 li 嵌套了图片。
• 控制点区 div#dots 没有内容，这是因为控制点要根据图片的数量（ul 的 li 个数）动态生成。

CSS：

*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
.box{
    width: 600px;
    height: 399px;
    border:20px #000 solid;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    margin-top: 100px;
}
.list{
    position: relative;
}
.list img{
    display: block;
}
.list li{
    width: 600px;
    height: 399px;
    overflow: hidden;
}
.box .dots{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    background: rgba(255,255,255,0.5);
    padding: 5px;
    border-radius: 30px;
}
.box .dots span{
    display: block;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
}
.box .dots span.active{
    background: #f30;
}

CSS代码如上，就不分析了，反正就这样。强调两点：

• 整个  div.box 要相对定位，约束绝对定位的控制点区 div#dots
• ul.list 也要相对定位，因为要复制第一个图，放到最后；复制最后一个图，放到第一图的前面。复制出来的图都是绝对定位的。

二、JS

1. 为了防止重复执行滚动事件，写一个 flag，当为 true 的时候，就不执行滚动事件。默认值为 false。

let isScroll = false;

2. 根据图片的个数动态生成点（span）。为了防止过度操作 DOM，使用了  createDocumentFragment 缓存生成的span 标签。

let li = list.querySelectorAll("li");
let li_len = li.length;
let index = 0;
let wrap = document.createDocumentFragment();
// 初始化工作
for(let i = 0; i < li_len; i++){
    let span = document.createElement("span");
    span.dataset.index = i;
    if(i == 0){
        span.classList.add("active");
    }
    wrap.appendChild(span);
    span.addEventListener("click",function(){
        index = this.dataset.index;
        changePic(index);
    } );
}
dots.appendChild(wrap);

3. 上下移动图片，就是在控制图片的 transform 的 translateY 属性。

// 图片切换函数：index++
function nextPic(){
    index++;
    if( index >= li_len ){
        index = 0;
        list.style.transform = "translateY(399px)"; // 调整list位置
        document.body.offsetHeight; // 强制重绘HTML
    }
    changePic(index);
}

// 图片切换函数：index--
function prevPic(){
    index--;
    if( index < 0 ){
        index = li_len - 1;
        list.style.transform = "translateY(" + (-399*li_len) + "px)";
        document.body.offsetHeight; // 强制重绘HTML
    }
    changePic(index);
}

 4. 切换图片，就是在换图，已经更改控制点的样式。

// 切换图片
function changePic(index){
    // 点的切换
    let dotsBros = findeBros(dots_span[index]);
    dots_span[index].classList.add("active");
    dotsBros.forEach(function(item){
        item.classList.remove("active");
    });
    
    // 图片切换
    isScroll = true;
    list.style.transform = "translateY(" + (-index * 399) + "px)";
    list.style.transition = "transform 0.5s";
    document.body.offsetHeight; // 强制重绘HTML
}

5. 当动画结束的时候，就要恢复 flag 变量的值为 flase，并且去掉图片的过渡动画。

// 动画结束时，恢复初始状态
list.addEventListener("transitionend",function(){
            isScroll = false;
            list.style.transition = "none";
 });

6. 滚动事件，判断滚轮值的正负，选择上还是下滚动图片。

// 鼠标滚轮事件
box.addEventListener("wheel",function(e){
    e.preventDefault();
    let delta = e.deltaY;
    if(delta > 0 && isScroll == false ){
        nextPic();
    }else if(delta < 0 && isScroll == false){
        prevPic();
    }
},{
    passive: false
});

 完整JS代码：

let box = document.getElementById("box");
let list = document.getElementById("list");
let dots = document.getElementById("dots");
let isScroll = false;

let li = list.querySelectorAll("li");
let li_len = li.length;
let index = 0;
let wrap = document.createDocumentFragment();
// 初始化工作
for(let i = 0; i < li_len; i++){
    let span = document.createElement("span");
    span.dataset.index = i;
    if(i == 0){
        span.classList.add("active");
    }
    wrap.appendChild(span);
    span.addEventListener("click",function(){
        index = this.dataset.index;
        changePic(index);
    } );
}
dots.appendChild(wrap);
let dots_span = dots.children;
// 初始图片
let liFirst = li[0];
let liLast = li[li_len - 1];
let newLiFirst = liFirst.cloneNode(true);
let newLiLast = liLast.cloneNode(true);
list.appendChild(newLiFirst);
list.appendChild(newLiLast);
newLiLast.style.position = "absolute";
newLiLast.style.top = "-399px";
newLiLast.style.left = "0";
// 工具函数：获取兄弟节点
function findeBros(tag){
    let bros = [];
    let parent = tag.parentNode;
    for(let i = 0; i < parent.children.length; i++){
        if(parent.children[i] !== tag){
            bros.push(parent.children[i]);
        }
    }
    return bros;
}
// 图片切换函数：index++
function nextPic(){
    index++;
    if( index >= li_len ){
        index = 0;
        list.style.transform = "translateY(399px)"; // 调整list位置
        document.body.offsetHeight; // 强制重绘HTML
    }
    changePic(index);
}

    // 图片切换函数：index--
    function prevPic(){
    index--;
    if( index < 0 ){
        index = li_len - 1;
        list.style.transform = "translateY(" + (-399*li_len) + "px)";
        document.body.offsetHeight; // 强制重绘HTML
    }
    changePic(index);
}

// 切换图片
function changePic(index){
    // 点的切换
    let dotsBros = findeBros(dots_span[index]);
    dots_span[index].classList.add("active");
    dotsBros.forEach(function(item){
        item.classList.remove("active");
    });
    
    // 图片切换
    isScroll = true;
    list.style.transform = "translateY(" + (-index * 399) + "px)";
    list.style.transition = "transform 0.5s";
    document.body.offsetHeight; // 强制重绘HTML
}
// 动画结束时，恢复初始状态
list.addEventListener("transitionend",function(){
    isScroll = false;
    list.style.transition = "none";
});

// 鼠标滚轮事件
box.addEventListener("wheel",function(e){
    e.preventDefault();
    let delta = e.deltaY;
    if(delta > 0 && isScroll == false ){
        nextPic();
    }else if(delta < 0 && isScroll == false){
        prevPic();
    }
},{
    passive: false
});