Javascript Jquery循环错误

我正在jquery中创建一个滑块，我不想使用任何插件或现有的滑块，所以我对循环有问题。 当我看到最后一张图片时，一个空白区域出现了，它返回到第一张图片，返回到第二张图片，再次返回到第一张图片，然后重复一遍又一遍

我不知道怎么了，所以我希望有人能帮我！ 谢谢你，利奥

HTML

JavaScript

(function(){

AutoPlay();

function AutoPlay(){
    var $img = $('img');
    var $animationSpeed = 1000;
    var $pause = 3000;
    var $totalImg = $img.length;
    var $imgWidth = $img.width();
    var $currentSlide = 1;

    setInterval(function(){
        $img.animate({'margin-left': '-='+$imgWidth}, $animationSpeed, function(){
            $currentSlide++;
            if($currentSlide > $totalImg){
                $currentSlide = 1;
                $img.css({'margin-left': 0});
            }
        }); 
    }, $pause);

} // end AutoPlay function

}); // end main function

---

如果所有图像的宽度都相同，这类工作。。。另一方面，动画失败

$(document).ready(function(){   

    var imgs = [
    "img1.jpg",
    "img2.jpg",
    "img3.jpg"

    ];
    var $img = $('#slider');
    var $imgWidth = $img.width();
    var $animationSpeed = 3000;
    var $pause = 0;

    setInterval(function(){
        imgs.forEach(function(imgPath){
            $img.animate({'margin-left': '-='+$imgWidth}, $animationSpeed, function(){
                $img.attr("src", imgPath);
                $img.attr("style","'margin-left: 0");
            });
            $pause = 9000;
        });
    }, $pause, $img);   
 //*** the rest of the code....
});

图像标签如下所示：

<img id="slider" style="width:500px;" src="img3.jpg" />

style=“width:500px；”“

因为这是我最大照片的大小。。。

---

它有很多工作要做，但是。。。希望有帮助。

我尝试了你的代码。。。缺少一对括号}（）；最后，为了让它自动执行，我想。。。它所做的只是将边距改到左边（看起来不错），但它会将边距应用到所有的

标记，因此我假设您没有发布其余的代码，这使得您很难理解您想要做什么。。。请将其余相关代码（HTML、CSS…）发布到上下文中。

$(document).ready(function(){   

    var imgs = [
    "img1.jpg",
    "img2.jpg",
    "img3.jpg"

    ];
    var $img = $('#slider');
    var $imgWidth = $img.width();
    var $animationSpeed = 3000;
    var $pause = 0;

    setInterval(function(){
        imgs.forEach(function(imgPath){
            $img.animate({'margin-left': '-='+$imgWidth}, $animationSpeed, function(){
                $img.attr("src", imgPath);
                $img.attr("style","'margin-left: 0");
            });
            $pause = 9000;
        });
    }, $pause, $img);   
 //*** the rest of the code....
});

<img id="slider" style="width:500px;" src="img3.jpg" />