基于JavaScript+jQuery的OOP轮播图无法切换、无限循环问题求助

问题根因 #

• 计数器更新逻辑被注释：原代码中控制图片索引切换的counter自增代码处于注释状态，执行完首张图动画后索引始终为0，无法切换到后续图片
• 无循环执行逻辑：仅在初始化时调用了一次slideFunc()，单轮动画执行完成后没有触发下一轮执行的逻辑，自然只会执行一次

修复代码 #

// OOP SLIDER
$("img").css("left" , "700px")
$("img").eq(0).css("left" , 0)

class Slider{
    constructor(_counter) {
        this.counter = _counter
        this.interval = 900
        this.delay = 1500
        this.imgTotal = $("img").length // 提前缓存图片总数，减少DOM查询
    }

    slideFunc=()=>{
        // 当前索引对应图片滑入可视区
        $("img").eq(this.counter).animate({left: 0}, this.interval ,()=> {
            // 停留指定时长
            $("img").eq(this.counter).animate({left: 0}, this.delay,()=> {
                // 当前图片滑出可视区
                $("img").eq(this.counter).animate({left: (-1 * 700)}, this.interval  , ()=> {
                    // 滑出后重置位置到右侧待加载区
                    $(this).css("left", "700px")
                    // 更新索引，超出总数量重置为0实现无限轮播
                    this.counter = ++this.counter >= this.imgTotal ? 0 : this.counter;
                    // 触发下一轮轮播
                    this.slideFunc()
                });
            });
        });
    }
}

let sliderobj = new Slider(0)
// 启动轮播
sliderobj.slideFunc()

逻辑说明 #

• 计数器更新逻辑放在当前图片完全滑出可视区、重置位置之后执行，保证索引切换的时序正确
• 每次单轮动画执行完成后递归调用slideFunc()，实现自动循环播放
• 索引自增时判断是否超过图片总数，超出则重置为0，实现无限轮播效果

内容的提问来源于stack exchange，提问作者amir jahan