怎么做？（oop Slider javascript 和 jquery）答案

【问题标题】：How can do it?(oop Slider javascript and jquery)怎么做？（oop Slider javascript 和 jquery）
【发布时间】：2021-08-04 02:39:29
【问题描述】：

** 嘿伙计们，我有 2 个问题； 1：当我设置（this.counter = 0）slideFunk method（）为eq（0）完成一次但它不能进入下一个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()

【问题讨论】：

标签： javascript jquery oop infinite-loop

【解决方案1】：

我认为，您不需要计数器，而是使用 each() 函数来遍历无限循环内的所有图像。

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

同时我看到你在动画函数中使用了一个回调到 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"/>

【讨论】：