JavaScript 轮播图代码解析：实现自动切换和手动控制

这段代码实现了一个简单的轮播图功能，包含自动切换、手动点击切换图片以及鼠标悬停停止切换等功能。

页面加载完毕后，代码执行以下操作：

初始化当前图片计数器 imgCount 为 0；
获取 HTML 中的图片元素 myImg、图片容器元素 myBox、数字容器元素 myNumberBox；
获取数字容器中的每个数字元素 myNumberLi，并依次为它们添加点击事件。

循环遍历数字元素集合 myNumberLi，为每个元素添加点击事件。点击数字元素时，执行以下操作：

取消数字容器中所有数字元素的 active 类；
为当前数字元素添加 active 类；
将 imgCount 的值设为当前数字元素的值减 1；
更改图片元素 myImg 的 src 属性为 images/imgCount.jpg。

当鼠标移入图片容器元素 myBox 时，清除定时器 timeOUT，停止自动切换图片。
当鼠标移出图片容器元素 myBox 时，重新启动定时器 timeOUT，继续自动切换图片。
定义函数 changeImg，实现自动切换图片的功能。每次调用该函数时，执行以下操作：

将 imgCount 的值加 1；
计算 imgCount 对 5 取模的值，得到图片序号；
更改图片元素 myImg 的 src 属性为 images/imgCount.jpg；
取消数字容器中所有数字元素的 active 类；
为当前数字元素添加 active 类。

在页面加载完毕后，启动定时器 timeOUT，每 5 秒钟调用一次 changeImg 函数，实现自动切换图片的效果。

window.onload = function() {
    imgCount = 0; // 当前图片计数器
    myImg = document.getElementById('myImg');
    myBox = document.getElementById('box');
    myNumberBox = document.getElementById('number');

    myNumberLi = myNumberBox.getElementsByTagName('li');
    for (i = 0; i < myNumberLi.length; i++) {
        myNumberLi[i].index = i;
        myNumberLi[i].onclick = function() {
            for (i = 0; i < myNumberLi.length; i++) {
                myNumberLi[i].classList.remove('active');
            }

            this.classList.add('active');
            imgCount = this.innerHTML - 1;
            myImg.src = 'images/' + imgCount + '.jpg';
        };
    }

    myBox.onmouseover = function() {
        clearInterval(timeOUT);
    };
    myBox.onmouseout = function() {
        timeOUT = setInterval(changeImg, 1000);
    };
    function changeImg() {
        imgCount++;
        imgCount = imgCount % 5;
        myImg.src = 'images/' + imgCount + '.jpg';
        for (i = 0; i < myNumberLi.length; i++) {
            myNumberLi[i].classList.remove('active');
        }
        myNumberLi[imgCount].classList.add('active');
    }

    timeOUT = setInterval(changeImg, 5000);
};

这段代码展示了如何使用 JavaScript 实现一个基本的轮播图功能，并通过事件监听和定时器来实现自动切换和手动控制。你可以根据需要修改图片数量、切换速度等参数，并根据自己的设计风格添加更多样式和交互效果。