JS案例：轮播图（第二代）

时间 2019-11-09

原文原文链接

较上个版本功能全面，函数模块化，下降联系，bug减小，附上代码：javascript

Html：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="./css/main.css">
    </head>

    <body>
        <div id="box">
            <div id="pic_box"></div>
            <img id="left" src="img/left.png" alt="">
            <img id="right" src="img/right.png" alt="">
            <ul id="dot_box"></ul>
        </div>

        <script src="./js/main.js">

        </script>
    </body>

</html>

Css：

* {
    margin: 0;
    padding: 0;
}

#box {
    margin: 50px auto;
    width: 960px;
    height: 320px;
    background: lightcoral;
    position: relative;
    overflow: hidden;
}

#pic_box {
    height: 320px;
    background: lightblue;
    position: absolute;
}

#left {
    position: absolute;
    top: 130px;
    left: 10px;
}

#right {
    position: absolute;
    top: 130px;
    right: 10px;
}

ul {
    list-style: none;
    position: absolute;
    bottom: 20px;
    left: 400px;
}

li {
    width: 20px;
    height: 20px;
    list-style: none;
    border-radius: 50%;
    float: left;
    margin-left: 5px;
}

JS：

var box, pic_box, left, right, dot_box, liList; //定义最外面的大盒子，装图片的盒子，左右按键，盒子下面的小点容器，及当前小点容器.
var count = 0; //记录当前显示的图片索引
var num = 160; //定时器帧数控制
var direct; //左右方向（方向为左向右移动，反之向左移动）方向是按钮的方向
var bool = false; //控制是否容许轮播
var autoPlay = false; //是否自动轮播
var picurl = ["img/a.jpeg", "img/b.jpeg", "img/c.jpeg", "img/d.jpeg", "img/e.jpeg"]; //图片路径
var piclist = []; //加载的图片（两张）
init(); //入口函数

function init() { //获取全部元素并赋值给变量，添加事件
    box = document.getElementById("box");
    pic_box = document.getElementById("pic_box");
    left = document.getElementById("left");
    right = document.getElementById("right");
    dot_box = document.getElementById("dot_box");
    left.addEventListener("click", picChange); //点击左键
    right.addEventListener("click", picChange); //点击右键
    box.addEventListener("mouseenter", isAuto); //鼠标进入大盒子取消自动轮播
    box.addEventListener("mouseleave", isAuto); //鼠标离开大盒子自动轮播
    creatImg(); //初始化并加载全部图片
    animation(); //开启每帧移动函数
    creatDot(); //新建小点（点击切换图片）
}

function creatImg() {
    for (var j = 0; j < picurl.length; j++) { //根据图片源新建图片
        piclist[j] = new Image();
        piclist[j].src = picurl[j];
        piclist[j].style.width = "960px";
        piclist[j].style.height = "320px";
    }
    pic_box.appendChild(piclist[0]); //初始化装图片的盒子，插入第一张图片

}

function picChange(e) {
    if (bool) return; //若轮播开关为真时，不执行函数，即点击一次后须要等整张图片轮播完才能点击下一次
    if (this === left) { //当单击向左按钮
        direct = "left"; //将方向改为左
        count--; //图片索引减一
        if (count === -1) { //当减到-1时，让索引为图片总数减一（数组从零开始）
            count = picurl.length - 1;
        }
    } else if (this === right) { //当单击向右按钮
        direct = "right"; //将方向改为右
        count++; //图片索引加一
        if (count === picurl.length) { //当加到图片总数减一时，让索引为0（数组从零开始）
            count = 0;
        }
    }
    nextPic(); //创造下一张
}

function nextPic() { //加载下一张图片

    pic_box.style.width = 960 * 2 + "px"; //初始化位置
    if (direct === "right") { //当方向为右时，在图片后面插入下一张图片
        pic_box.appendChild(piclist[count]);
        pic_box.style.left = 0;
    } else if (direct === "left") { //当方向为左时，在图片前面插入下一张图片
        pic_box.insertBefore(piclist[count], pic_box.firstElementChild);
        pic_box.style.left = -960 + "px";
    }
    bool = true; //图片加载完成后，让控制图片轮播的开关为真，防止图片轮播时执行其余事件
    liChange(); //让小点改变
}

function animation() { //动画函数，自动轮播和轮播
    requestAnimationFrame(animation);
    picMove();
    autoScroll();
}

function creatDot() { //新建小点，控制点击切换图片
    for (var i = 0; i < picurl.length; i++) {
        var li = document.createElement("li");
        dot_box.appendChild(li);
        li.style.background = "rgba(255,255,255,0.7)";
    }
    dot_box.firstElementChild.style.background = "rgba(255,255,255,1)"; //默认选中第一个小点
    dot_box.addEventListener("click", changeDot); //点击小点触发事件，切换图片
    liChange();
}

function changeDot(e) {
    if (bool) return; //若轮播开关为真时，不执行函数，即点击一次后须要等整张图片轮播完才能点击下一次
    var list = Array.from(dot_box.children); //将小点放至数组
    var index = list.indexOf(e.target); //查找当前的小点
    if (index === count) { //若当前点击的图片与索引相等，表示不切换（就是自己）
        return;
    }
    if (index > count) { //当点击的小点在当前右边，将方向换成右
        direct = "right";
    } else if (index < count) { //当点击的小点在当前左边，将方向换成左
        direct = "left";
    }
    count = index; //将当前索引切换成点击的那个
    nextPic(); //新建下一张图片
}

function liChange() {
    if (liList) { //前一个小点背景透明
        liList.style.backgroundColor = "rgba(255,255,255,0.7)";
    }
    liList = dot_box.children[count]; //将被切换的小点赋值给当前小点，使其根据计数器切换
    liList.style.background = "rgba(255,255,255,1)";
}

function picMove() {
    if (!bool) return; //若轮播开关为假时，不执行函数，即点击一次按钮或小点后才能开始轮播
    if (direct === "left") { //向右移动
        pic_box.style.left = pic_box.offsetLeft + 20 + "px"; //移动速度，每次20px，当移动到0时关闭轮播开关，并将最后一张图删除
        if (pic_box.offsetLeft === 0) {
            bool = false;
            pic_box.lastElementChild.remove();
        }
    } else if (direct === "right") { //向左移动
        pic_box.style.left = pic_box.offsetLeft - 20 + "px"; //移动速度，每次-20px，当移动到-960时关闭轮播开关，并将第一张图删除，重置位置为0
        if (pic_box.offsetLeft === -960) {
            bool = false;
            pic_box.firstElementChild.remove();
            pic_box.style.left = 0;
        }
    }
}

function autoScroll() { //自动轮播
    if (!autoPlay) return; //若自动轮播开关为非（鼠标移入时），不自动轮播
    num--; //定时器帧数计数器减一，减到0时赋值为160
    if (num === 0) {
        num = 160;
        direct = "right";
        count++;
        if (count === picurl.length) {
            count = 0;
        }
        nextPic();
    }

}

function isAuto(e) { //鼠标移入时，不自动轮播，反之，自动轮播
    if (e.type === "mouseenter") {
        autoPlay = false;
    } else if (e.type = "mouseleave") {
        autoPlay = true;
    }
}