Javascript 简单JQuery滑块工作不正常

我不熟悉jQuery和javascript，我正在制作一些动画来练习我的新技能。下面的代码是一个简单的滑块，它使用setInterval（）循环浏览4个幻灯片，也可以单击导航。除了第一张或最后一张幻灯片处于活动状态并单击按钮外，滑块工作正常。在这种情况下，滑块在循环返回之前显示空白幻灯片。我试图在左边缘等于-2880px时操纵ul点击，但没有成功。这是我的密码：

var i=0；
$（文档）.ready（函数（）{
setInterval（函数（）{
$（“#我的滑块”）。动画（{“左边距”：“-=720px”}，1000，函数（）{
i++；
如果（i==4）{
i=0；
$（“#我的滑块”）.css（“左边距”，0）；
}
}); 
}, 5000); 
})
$（文档）.ready（函数（）{
$（“.right”）。单击（函数（）{
$（“#我的滑块”）.animate（{“左边距”：“-=720px”}，1000）；
}); 
$（“.left”）。单击（函数（）{
$（“#我的滑块”）.animate（{“左边距”：“+=720px”}，1000）；
}); 
});
。滑块包装器{
宽度：50%；
高度：400px；
保证金：0自动；
溢出：隐藏；
}
.滑块包装{
列表样式类型：无；
宽度：3600px；
最大宽度：3600px；
高度：400px；
填充：0；
保证金：0；
}
李先生{
浮动：左；
宽度：720px；
高度：400px；
}
#幻灯片1{
背景#04151F；
}
#幻灯片2{
背景：#183A37；
}
#幻灯片3{
背景：EFD6AC；
}
#幻灯片4{
背景：#C44900；
}
#幻灯片5{
背景#04151F；
}
.左，.右{
字体大小：40px；
z指数：1；
位置：固定；
浮动：对；
利润率：-15%0.5%；
光标：指针；
颜色：#FFF；
}
.对{
左边缘：47%；
}








&larr
&rarr
您还需要将您的循环代码用于按钮

$(document).ready(function() {
$(".right").click(function() {
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){
    i++; 
        if( i === 4 ) {
          i = 0; 
           $("#my-slider").css("margin-left", 0); 
        }
  });   
});

我认为这是最简单的解决办法



var i=0；
$（文档）.ready（函数（）{
setInterval（函数（）{
$（“#我的滑块”）。动画（{“左边距”：“-=720px”}，1000，函数（）{
i++；
如果（i==4）{
i=0；
$（“#我的滑块”）.css（“左边距”，0）；
}
}); 
}, 5000); 
/////////////////////////////////////
$（“.right”）。单击（函数（）{
$（“#我的滑块”）。动画（{“左边距”：“-=720px”}，1000，函数（）{
i++；
如果（i==4）{
i=1；
$（“#我的滑块”）.css（“左边距”，0）；
}
});    
}); 
$（“.left”）。单击（函数（）{
if（$（“#我的滑块”）.css（“左边距”）=“0px”）{
$（“#我的滑块”）.animate（{“左边距”：“-2880px”}，1000）；
}否则{
$（“#我的滑块”）.animate（{“左边距”：“+=720px”}，1000）；
}
}); 
});
。滑块包装器{
宽度：50%；
高度：400px；
保证金：0自动；
溢出：隐藏；
}
.滑块包装{
列表样式类型：无；
宽度：3600px；
最大宽度：3600px；
高度：400px；
填充：0；
保证金：0；
}
李先生{
浮动：左；
宽度：720px；
高度：400px；
}
#幻灯片1{
背景#04151F；
}
#幻灯片2{
背景：#183A37；
}
#幻灯片3{
背景：EFD6AC；
}
#幻灯片4{
背景：#C44900；
}
#幻灯片5{
背景#04151F；
}
.左，.右{
字体大小：40px；
z指数：1；
位置：固定；
浮动：对；
利润率：-15%0.5%；
光标：指针；
颜色：#FFF；
}
.对{
左边缘：47%；
}








&larr
&rarr
如果您创建一个fiddle@AnoopLL这是小提琴：好的，这只适用于右边的按钮，左边的按钮更复杂，我现在没有解决办法。欢迎你！谢谢你的接受，谢谢！我的建议：如果你想制作非常复杂的动画，不要使用Jquery！使用GreenSock Tweenmax js库：它对于动画来说非常简单和强大。我使用JS和GreenSock lib的项目：谢谢，将查看：）