轮播图是网站中常见的一种展示方式，一般常用于：电商网站、新闻网站、企业官网 等。轮播图也是前端开发必须掌握的基础。这里就用 CSS3 + 原生 JavaScript 实现一个简单的轮播图。

注意！因为使用了 CSS3 ，所以不能在 IE10 以下的浏览器运行。

代码

HTML：

<div id="box">
    <div id="img-box">
        <a href="#">
            <img src="https://img.alicdn.com/tfs/TB1kQJodeP2gK0jSZFoXXauIVXa-520-280.jpg_q90_.webp" alt="轮播图1">
        </a>
        <a href="#">
            <img src="https://img.alicdn.com/simba/img/TB1PkttegaH3KVjSZFjSuwFWpXa.jpg" alt="轮播图2">
        </a>
        <a href="#">
            <img src="https://img.alicdn.com/simba/img/TB16WIIc9f2gK0jSZFPSutsopXa.jpg" alt="轮播图3">
        </a>
        <a href="#">
            <img src="https://img.alicdn.com/simba/img/TB1XK9eX9f2gK0jSZFPSutsopXa.jpg" alt="轮播图4">
        </a>
        <a href="#">
            <img src="https://img.alicdn.com/tfs/TB1YE7gcW61gK0jSZFlXXXDKFXa-520-280.jpg_q90_.webp" alt="轮播图5">
        </a>
    </div>
    <!--切换图片的按钮，每个按钮对应一张图片-->
    <div id="btn-box">
        <div class="btn"></div>
        <div class="btn"></div>
        <div class="btn"></div>
        <div class="btn"></div>
        <div class="btn"></div>
    </div>
    <!--切换上一张和下一张图片的按钮-->
    <div role="button" aria-label="上一张" id="previous"><</div>
    <div role="button" aria-label="下一张" id="next">></div>
</div>

这里使用了 5 张 图片，img 的图片地址是在淘宝上随便找的。

CSS：

/*清除所有的margin和padding*/
*{
    margin: 0;
    padding: 0;
}

/*图片框*/
#box{
    width: 520px;
    height: 280px;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
}
#img-box{
    width: 2600px;
    height: 280px;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(0px, 0);
    transition: 0.4s;
}
/*图片链接*/
#img-box a{
    float: left;
}

/*切换图片的按钮*/
#btn-box{
    width: 100px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    display: flex;;
    transform: translate(-50%, 0);
}
#btn-box .btn{
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    margin: auto;
}

/*切换上一张和下一张图片的按钮*/
#previous,#next{
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    border: none;
    color: #ffffff;
    position: absolute;
    top: 50%;
    transform: translate(0 , -50%);
}
#previous{
    left: 0;
}
#next{
    right: 0;
}

这里的轮播动画使用的是 CSS3 的 transition，动画时间为 0.4 秒。

下面是轮播图的外观效果：

轮播图静态效果

下面的 5 个 圆形按钮分别对应 5 张图片。

JS：

let imgBox = document.querySelector('#img-box');  //  需要移动的图片框
let btn = document.querySelectorAll('.btn');  //  切换图片的按钮
let previousBtn = document.querySelector('#previous');  //  切换上一张的按钮
let nextBtn = document.querySelector('#next');  //  切换下一张的按钮
let imgW =  -520;  //  单张图片的宽度，因为图片框是向左移动的，用负数更方便计算
let imgNum = 0;  //  当前显示的图片序号

//  切换下一张图片的按钮点击
nextBtn.onclick = () => {
    imgNum ++;
    if (imgNum >= btn.length) {
        imgNum = 0;
    }
    btn[imgNum].click();  //  根据图片序号调用对应的按钮点击
};

//  切换上一张图片的按钮点击
previousBtn.onclick = () => {
    imgNum --;
    btn[imgNum].click();  //  根据图片序号调用对应的按钮点击
    if (imgNum <= 0) {
        imgNum = 5;
    }
};

//  设置定时器
setInterval(() => {
    if (imgNum >= btn.length) {
        imgNum = 0;
    }
    btn[imgNum].click();  //  根据图片序号调用对应的按钮点击
    imgNum ++;
}, 600);

for (let i = 0;i < btn.length;i ++) {
    btn[i].index = i;  //  给每一个按钮添加一个对应的索引

    //  切换图片的按钮点击
    btn[i].onclick = ev => {
        imgBox.style.transform = 'translate(' + ev.target.index * imgW + 'px)';
        btnActive(ev.target.index);  //  调用设置按钮选中状态的函数
        imgNum = i;  //  让当前显示的图片序号 = 当前按钮的序号
    };
}

btnActive(0);  //  调用设置按钮选中状态的函数

//  设置按钮选中状态的函数
function btnActive(btnIndex = 0) {
    for (let i = 0;i < btn.length;i ++) {
        btn[i].style.background = '#ffffff';
    }
    btn[btnIndex].style.background = '#FF5000';
}

因为没有用到任何框架和库，所以看上去代码会有点多，实际上很简单。

如果用 jQuery 的话会更简单。

效果展示

点击顺序切换按钮：

轮播图上一张和下一张的效果

点击下方的圆形按钮：

轮播图随机点击按钮

自动轮播：

轮播图定时器轮播

这里因为要缩短 gif 的录制时间，所以自动轮播的定时器设置为 0.6 秒，一般自动轮播的间隔时间差不多在 5 秒 左右。

代码说明

JavaScript 使用了一部分 ES6 的语法，如果要在 IE 运行需要转换为 ES5 语法。

我这里使用的是 CSS3 的 transition 动画，对于 IE10 以下的浏览器是不兼容的。如果需要兼容老的 IE 浏览器 就需要用 JS 的定时器来实现动画，不过在流畅度方便可能不如 CSS 3 的 transition 动画。