js手写轮播图思路与实现

// 定义轮播图的类
class Carousel {
    constructor(selector) {
        this.DOM = document.querySelector(selector); // 获取轮播图容器
        this.items = Array.from(this.DOM.children); // 获取所有轮播项
        this.currentIndex = 0; // 当前索引
        this.init();
    }
 
    init() {
        // 初始化时可以添加一些样式或者事件
        this.DOM.style.display = 'flex';
        // 添加点击事件
        this.items.forEach((item, index) => {
            item.addEventListener('click', () => {
                this.showItem(index);
            });
        });
    }
 
    showItem(index) {
        // 显示指定索引的轮播项
        this.items.forEach((item, idx) => {
            item.style.display = 'none'; // 隐藏所有项
        });
        this.items[index].style.display = 'block'; // 显示指定项
        this.currentIndex = index; // 更新当前索引
    }
 
    nextItem() {
        // 显示下一个轮播项
        this.showItem((this.currentIndex + 1) % this.items.length);
    }
 
    prevItem() {
        // 显示上一个轮播项
        this.showItem((this.currentIndex - 1 + this.items.length) % this.items.length);
    }
}
 
// 使用示例
const carousel = new Carousel('#carousel');
// 手动切换轮播图
setInterval(() => {
    carousel.nextItem();
}, 3000);

这段代码定义了一个名为Carousel的类，用于创建轮播图的实例。它提供了基本的轮播功能，比如初始化轮播项、显示指定轮播项、显示下一个轮播项和显示上一个轮播项。这个类可以被扩展以添加更多高级功能，比如自动播放、轮播指示器、触摸事件处理等。