怎么辦？（oop Slider javascript 和 jquery）

Question

** 嘿伙計們，我有 2 個問題； 1：當我設置（this.counter = 0）slideFunk method（）為eq（0）完成一次但它不能go到下一個eq

2：當 (_counter = last pic) _counter 回到 0 時，我希望它是無限循環

我有6張照片**

// 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
    }

    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")
                });
               // this.counter = ++this.counter >= $("img").length ? 0 : this.counter;
            });
        });
    }
}

let sliderobj = new Slider(0)

sliderobj.slideFunc()

Answer 1

我認為，您不需要計數器，而是使用 each() function 來遍歷無限循環內的所有圖像。

https://api.jquery.com/each/

同時，我看到您在動畫 function 中使用了對 arg3 的回調，這是錯誤的，您需要在 arg4 中放置此回調。

我會給你一個例子來說明如何做到這一點，你可以根據自己的需要進行修改。

 // OOP SLIDER //$("img").css("left", "700px") //$("img").eq(0).css("left", 0) $("img").css("width", "30px").css({display: "block", position: "relative"}); class Slider{ constructor(){ this.interval = 1000; this.delay = 1500; } slideFunc(){ $("img").each(function(index, element){ $(element).animate({left: "+=700px"}, this.interval, null, function(){ $(this).css({left: "100px"}); //End }); }); this.slideFunc(); } } let sliderobj = new Slider(); sliderobj.slideFunc();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://www.w3schools.com/tags/img_girl.jpg"/> <img src="https://www.w3schools.com/tags/img_girl.jpg"/> <img src="https://www.w3schools.com/tags/img_girl.jpg"/> <img src="https://www.w3schools.com/tags/img_girl.jpg"/> <img src="https://www.w3schools.com/tags/img_girl.jpg"/> <img src="https://www.w3schools.com/tags/img_girl.jpg"/> <img src="https://www.w3schools.com/tags/img_girl.jpg"/>