Javascript 幻灯片放映的效果很奇怪

我正在制作学习幻灯片，但效果很奇怪。 只有第一和第二锂元素重复运动。我不能很好地解释这种现象。 这是我的密码

timer（）；
函数计时器（）{
setInterval（function（）{slide（）}，2000）；
}
函数幻灯片（）{
$（'.imgs'）.animate（{left:'-300px'}，1000，function（）{
$（this.css（{'left'：0}）；
$（this）.append（$（this）.children（'.img'）.eq（0））；
});
}

ul{填充：0；边距：0；}
li{列表样式：无；}
#框{宽度：300px；高度：200px；边距：50px自动；位置：相对；溢出：隐藏；}
.imgs{宽度：900px；高度：200px；位置：相对；}
.img{宽度：300px；高度：200px；浮动：左侧；位置：相对；}
.img:第一个孩子{背景：粉红色；}
.img:n个孩子（2）{背景：天蓝色；}
.img:n个孩子（3）{背景：灰色；}

移动元件-300px，直到达到li元件总数

如果计数器达到li元素的总数，则将其重置

到达最后一个元素集后-0px

timer（）；
函数计时器（）{
设置间隔（幻灯片（），2000）；
}
函数幻灯片（）{
var imageWidth=300
var totalElm=$（“.imgs.img”）.length
$（'.imgs'）.width（totalElm*imageWidth）
变量计数器=0
返回函数（）{
var next=计数器+1
如果（下一个

ul{填充：0；边距：0；}
li{列表样式：无；}
#框{宽度：300px；高度：200px；边距：50px自动；位置：相对；溢出：隐藏；}
.imgs{宽度：900px；高度：200px；位置：相对；}
.img{宽度：300px；高度：200px；浮动：左侧；位置：相对；}
.img:第一个孩子{背景：粉红色；}
.img:n个孩子（2）{背景：天蓝色；}
.img:n个孩子（3）{背景：灰色；}
.img:n个孩子（4）{背景：红色；}

在全局定义一个变量，用于索引赋值为0。然后将其传递给slide函数，以便根据索引获取图像，并将其分配给divvar i=0；定时器（）；函数timer（）{setInterval（function（）{slide（i）}，2000）；}function slide（）{$（'.imgs'）.animate（{left:'-300px'}，1000，function（）{$（this）.css（{'left'：0}）；var childs=$（this）.childs（'.img'）；$（this）.append（childs[i]）；i++}