本文已参与「新人创作礼」活动，一起开启掘金创作之路。

基本功能

实现了一个简单的轮播图 demo，不足之处在于从最后一张图片切换到第一张图片是通过直接切换到第一张来实现的，等之后再完善~

自动切换
底部圆点切换
左右按钮切换

HTML

<div id="container">
    <!-- 轮播图 -->
    <ul id="img_ul">
        <li><img src="./nxt.jpeg"></li>
        <li><img src="./raw.jpeg"></li>
        <li><img src="./smackdown.jpeg"></li>
        <li><img src="./耿鬼.jpg"></li>
    </ul>
    <!-- 底部按钮 -->
    <ul id="litCir_ul"></ul>
    <!-- 左右切换按钮 -->
    <div id="buttons">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>
</div>

CSS

需要注意的一点是，需要给包裹轮播图的 container 设置 overflow: hidden，来隐藏超出的图片

<style>
    /* 包裹轮播图的容器需要使用 overflow: hidden 来隐藏超出的图片 */
    #container {
        position: relative;
        width: 500px;
        height: 400px;
        margin: 0 auto;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    #img_ul {
        width: 2000px; /* 轮播图宽度为 图片数 * 图片宽 */
        height: 400px;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .5s;
    }
    
    #img_ul li {
        float: left;
        margin: 0;
        padding: 0;
        width: 500px;
        height: 400px;
    }
    
    #img_ul li img {
        width: 500px;
        height: 400px;
    }
    
    #litCir_ul {
        position: absolute;
        margin: 0;
        padding: 0;
        right: 10px;
        bottom: 10px;
    }
    
    #litCir_ul li {
        margin: 0;
        padding: 0;
        float: left;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        margin-left: 10px;
        cursor: pointer;
    }
    
    /* 圆点按钮生效样式 */
    li.active {
        background-color: white;
    }
    
    li.quiet {
        background-color: #1e90ff;
    }
    
    #buttons {
        margin: 0;
        padding: 0;
        display: none;
    }
    
    /* hover 轮播图则显示左右切换按按钮 */
    #container:hover #buttons {
        display: block;
    }
    
    #buttons span {
        position: absolute;
        width: 40px;
        height: 40px;
        top: 50%;
        margin-top: -20px;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-family: Simsun;
        font-size: 30px;
        border: 1px solid #fff;
        opacity: 0.3;
        cursor: pointer;
        color: #fff;
        background: black;
    }

    #left {
        left: 5px;
    }

    #right {
        left: 100%;
        margin-left: -45px;
    }
</style>

JS 实现图片轮播

获取 HTML 中的对象和声明所需变量

var img_ul = document.getElementById("img_ul"); // 轮播图
var litCir_ul = document.getElementById("litCir_ul"); // 圆点按钮 ul
var buttons = document.getElementById("buttons"); // 左右切换按钮

var cLis = litCir_ul.children; // 圆点按钮
var len = img_ul.children.length;     //图片数
var width = 500;       //每张图片的宽度
var picN = 0;                         //当前显示的图片下标

根据图片数添加圆点按钮

// 根据图片数添加小圆点
for (let i = 0; i < len; ++i) 
    var a_li = document.createElement("li");
    a_li.className = 'quiet';
    litCir_ul.appendChild(a_li);
}
// 默认把第一个圆点按钮设置 active
litCir_ul.children[0].className = 'active';

使用定时器实现自动轮播

定义 Roll 函数，并自执行。我这里切换图片是通过设置 img_ul 的 left 属性来控制的。记录当前显示的图片下标，定时器执行一次就把图片下标 picN +1，然后设置 img_ul.style.left = (-1 * picN * width) + 'px'。当 picN === len 时，需要从最后一张图片切换为第一张图片，这里通过设置 left 为0来实现。

(function Roll() {
    clearInterval(img_ul.timer); // 每次运行该函数必须清除之前的定时器！！！！！
    img_ul.timer = setInterval(() => {
        ++picN;
        // 切换到第一张
        if (picN === len) {
            img_ul.style.left = 0;
            picN = 0;
        } else {
            img_ul.style.left = (picN * width * -1) + 'px';
        }
        // 设置 active 的小圆点
        for (var j = 0; j < len; j++) {
            cLis[j].className = "quiet";
        }
        cLis[picN].className = "active";
    }, 2000)
})();

触及小圆点切换图片

给每个小圆点绑定 mouseover 事件，通过小圆点的 index 来确定该切换到哪张图片。

// 触碰小圆点切换图片
for (var i = 0; i < len; i++) {
    cLis[i].index = i;
    // 给每个小圆点绑定 mouseover 事件
    cLis[i].onmouseover = function () {
        for (var j = 0; j < len; j++) {
            cLis[j].className = "quiet";
        }
        this.className = "active";
        picN = this.index; // 切换的图片下标
        img_ul.style.left = (picN * width * -1) + 'px'; // 切换图片
        Roll(); // 重新轮播
    }
}

点击左右切换按钮切换图片

实现思路与前面的小圆点切换类似，要注意处理边界

buttons.children[0].onclick = function () {
    --picN;
    // 在第一张图片，则下一张图片是最后一张
    if (picN === 0) {
        picN = len - 1;
    }
    for (var j = 0; j < len; j++) {
        cLis[j].className = "quiet";
    }
    cLis[picN].className = "active";
    img_ul.style.left = (picN * width * -1) + 'px';
    Roll();
}

buttons.children[1].onclick = function () {
    ++picN;
    // 在最后一张，则下一张图片是最后一张第一张图片
    if (picN === len) {
        picN = 0;
    }
    for (var j = 0; j < len; j++) {
        cLis[j].className = "quiet";
    }
    cLis[picN].className = "active";
    img_ul.style.left = (picN * width * -1) + 'px';
    Roll();
}

最后

欢迎大家在评论区一起交流，一起进步！

【JS】实现简单轮播图