JS实现轮播图(超详细代码注释)

// 轮播图函数
function carousel(images, container) {
    let currentIndex = 0; // 当前图片索引
 
    // 显示特定索引的图片
    function showImage(index) {
        images[currentIndex].style.display = 'none'; // 隐藏当前图片
        images[index].style.display = 'block'; // 显示目标图片
        currentIndex = index; // 更新当前图片索引
    }
 
    // 切换到上一张图片
    function showPrevious() {
        let previousIndex = (currentIndex - 1 + images.length) % images.length;
        showImage(previousIndex);
    }
 
    // 切换到下一张图片
    function showNext() {
        let nextIndex = (currentIndex + 1) % images.length;
        showImage(nextIndex);
    }
 
    // 初始显示第一张图片
    showImage(0);
 
    // 为左箭头添加点击事件
    container.querySelector('.left-arrow').addEventListener('click', showPrevious);
 
    // 为右箭头添加点击事件
    container.querySelector('.right-arrow').addEventListener('click', showNext);
 
    // 如果需要自动播放，可以添加定时器
    // let intervalId = setInterval(showNext, 3000); // 每3秒切换到下一张图片
    // container.addEventListener('mouseover', () => clearInterval(intervalId)); // 鼠标悬停时清除定时器
    // container.addEventListener('mouseout', () => intervalId = setInterval(showNext, 3000)); // 鼠标离开时重置定时器
}
 
// 使用示例
document.addEventListener('DOMContentLoaded', () => {
    let images = document.querySelectorAll('.carousel img');
    let container = document.querySelector('.carousel');
    carousel(images, container);
});

这段代码实现了一个基本的轮播图功能，包括切换到上一张和下一张图片的功能。代码中使用了函数式编程的概念，将轮播图的逻辑封装在一个函数中，通过事件监听器来处理用户的交互。同时，代码中有详细的中文注释，对于学习者来说非常友好。