手写轮播图复盘我比现在年轻十岁的时候，获得了一个游手好闲的职业，去乡间收集民间歌谣。那一年的整个夏天，我如同一只乱飞的麻

需要轮播的四张图

html页面

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
 
<body>
    <div id="banner">
        <ul id="imglist">
            <!-- 图片列表 -->
            <li><a href=""><img src="images/nature-1.jpg" alt=""></a></li>
            <li><a href=""><img src="images/nature-2.jpg" alt=""></a></li>
            <li><a href=""><img src="images/nature-3.jpg" alt=""></a></li>
            <li><a href=""><img src="images/nature-4.jpg" alt=""></a></li>
            <li><a href=""><img src="images/nature-1.jpg" alt=""></a></li>
        </ul>
        <ul id="icolist">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <!-- 左右两边的小按钮 -->
        <div class="prev"><</div>
        <div class="next">></div>
        </div>
        <div id="test"></div>
        <script src="./js/index.js"></script>
</body>

</html>

css样式

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    /* 去掉默认样式 */
}

#banner {
    width: 800px;
    height: 400px;
    overflow: hidden;
    /* 超出隐藏 */
    border: 2px solid #999;
    position: relative;
}

#banner img {
    /* 设置图片大小800*400 */
    width: 800px;
    height: 400px;
}
/* 设置四图宽度 */
#imglist {
    /* 多添加一张图一补齐 */
    width: 4000px;
    height: 400px;
}

#imglist li {
    float: left;
    /* 左浮动图片横排 */
}
/* 设置指示器圆点 */
#icolist {
    position: absolute;
    right: 330px;
    bottom: 10px;
    text-align: center;
}

#icolist li {
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #666;
    color: #fff;
    margin-left: 5px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}
/* 小按钮css属性 */
.prev {
    background: #666;
    opacity: 0.7;
    height: 40px;
    width: 30px;
    position: absolute;
    left: 5px;
    top: 45%;
    color: #fff;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

.next {
    background: #666;
    opacity: 0.7;
    height: 40px;
    width: 30px;
    position: absolute;
    right: 5px;
    top: 45%;
    color: #fff;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

实现轮播的js代码

// 获取指示器元素
var esico = document.getElementById('icolist').getElementsByTagName('li');
var eicolist = document.querySelector('#icolist');
//获取图片列表元素
var eimglist = document.querySelector('#imglist');
//获取指示器列表元素
var etest = document.querySelector('#test');
// 获取小按钮元素
var eprev = document.querySelector('.prev');
var enext = document.querySelector('.next');
// 创建移动变量与定时器
var left = 0;
var timer;
esico[2].style.backgroundColor = 'red';
run();
// 滚动函数，通过样式marginleft进行移动
function run() {
    if (left <= -3200) {
        left = 0;
        // 滚完重置

    }
    //创建变量m获取当前图片序号
    var m = Math.floor(-left / 800);
    imglist.style.marginLeft = left + 'px';
    // 每十毫秒运行一次run,每次偏移left累计-10
    var n = (left % 800 == 0) ? n = 1200 : n = 6;
    // 变量n，滚完一张图停留1200ms
    left -= 10;
    icochange(m);
    // run函数调用icochange变换指示器
    timer = setTimeout(run, n);
}
//创建指示器变换函数
function icochange(m) {
    //for循环清空li元素背景色
    for (let index = 0; index < esico.length; index++) {
        esico[index].style.backgroundColor = '';
    }
    if (m < esico.length) {
        // 设置指示器背景色为红色
        esico[m].style.backgroundColor = 'red';
    }
}
// 指定图片位置函数imgchange
function imgchange(n) {
    let lt = - (n * 800)
    imglist.style.marginLeft = lt + 'px';
    left = lt;
}
eprev.onclick = function () {
    //获取当前位置，当前位置-1就是上一张
    let prevgo = Math.floor(-left / 800) - 1;
    if (prevgo == -1) {
        // 第一张往前是第四张
        prevgo = 3;
    }
    imgchange(prevgo);
    icochange(prevgo);
}
enext.onclick = function () {
    let nextgo = Math.floor(-left / 800) + 1;
    if (nextgo == 4) {
        nextgo = 0;
    }
    imgchange(nextgo);
    icochange(nextgo);
}
// 创建指示器列表元素点击事件
eicolist.onclick = function () {
    // 获取目标元素
    var tg = event.target;
    // 获取序号
    let ico = tg.innerHTML - 1;
    // 调用以下两个函数实现点击切换
    imgchange(ico);
    icochange(ico);
}
eimglist.onmouseover = function () {
    clearTimeout(timer);
    // 鼠标在图片列表上时轮播定时器清零，轮播停止
}
eimglist.onmouseout = function () {
    run();
}