Javascript 在setInterval（）中重复动画？

在图像滑动动画完成后，它会一直向右滑动，我尝试过设置超时将图像移回左侧，这样它会重新启动，但设置间隔动画会停止。 有没有办法将#幻灯片向左移动400%，这样幻灯片就可以从头开始重新启动，从而创建一个无限循环

非常感谢您的所有贡献

HTML:

JQUERY：

setInterval(function(){ 
        $('#slidewindow').animate({
            right:'+=100%',

            }, 1000);
    }, 2000);

---

您可以使用全局计数器

var计数器=0；
setInterval（函数（）{
如果（计数器==3）
{
$（“#滑动方向”）。设置动画({
右：'-=300%'，
}, 1000);
计数器=0；
}
其他的
{
$（“#滑动方向”）。设置动画({
右：'+=100%'，
}, 1000);
计数器++；
}
}, 2000);
滑动框{
宽度：80%；
边框：实心；
边框颜色：白色；
边界宽度：1em；
背景颜色：黄色；
显示：内联块；
溢出：隐藏；
}
#滑入{
浮动：左；
宽度：500%；
保证金：0；
位置：相对位置；
}
.imgs{
宽度：20%；
浮动：左；
保证金：0；
}

---

您可以使用全局计数器

var计数器=0；
setInterval（函数（）{
如果（计数器==3）
{
$（“#滑动方向”）。设置动画({
右：'-=300%'，
}, 1000);
计数器=0；
}
其他的
{
$（“#滑动方向”）。设置动画({
右：'+=100%'，
}, 1000);
计数器++；
}
}, 2000);
滑动框{
宽度：80%；
边框：实心；
边框颜色：白色；
边界宽度：1em；
背景颜色：黄色；
显示：内联块；
溢出：隐藏；
}
#滑入{
浮动：左；
宽度：500%；
保证金：0；
位置：相对位置；
}
.imgs{
宽度：20%；
浮动：左；
保证金：0；
}

---

如果在动画播放后恢复动画的

right

属性，然后将第一张图像移动到列表的末尾，则会不断播放幻灯片：

setInterval（函数（）{
$（“#滑动方向”）。设置动画({
右：'+=100%'，
}，1000，函数（）{//添加此回调函数
//在末尾重新注入第一个图像，并将“right”设置回0
$（'slidewindow'）.append（$（'slidewindow>div:first'））.css（{right:0}）；
});
}, 2000);
滑动框{
宽度：80%；
边框：实心；
边框颜色：白色；
边界宽度：1em；
背景颜色：黄色；
显示：内联块；
溢出：隐藏；
}
#滑入{
浮动：左；
宽度：500%；
保证金：0；
位置：相对位置；
}
.imgs{
宽度：20%；
浮动：左；
保证金：0；
}

---

如果在动画播放后恢复动画的

right

属性，然后将第一张图像移动到列表的末尾，则会不断播放幻灯片：

setInterval（函数（）{
$（“#滑动方向”）。设置动画({
右：'+=100%'，
}，1000，函数（）{//添加此回调函数
//在末尾重新注入第一个图像，并将“right”设置回0
$（'slidewindow'）.append（$（'slidewindow>div:first'））.css（{right:0}）；
});
}, 2000);
滑动框{
宽度：80%；
边框：实心；
边框颜色：白色；
边界宽度：1em；
背景颜色：黄色；
显示：内联块；
溢出：隐藏；
}
#滑入{
浮动：左；
宽度：500%；
保证金：0；
位置：相对位置；
}
.imgs{
宽度：20%；
浮动：左；
保证金：0；
}

---

这是我的版本，它更通用，请尝试在代码中使用它

var-right=0；
setInterval（函数（）{
//确定右位置减去一幅图像的宽度。
右=parseInt（$（'#slidewindow'）.css（“右”）+$（'.imgs'）.width（）；
//检查正确的位置是否已到达末端，即滑块宽度向内
如果（右===$（“#滑动方向”）.width（）{
//如果到达终点，您可以使用下面的行将其直接发送到第一个图像。
//$（'#slidewindow'）.css（“右”，“0px”）；
//或
//如果要设置返回到第一行的动画，请使用下面的JS
$（“#滑动方向”）。设置动画({
右：“0”
}, 1000);
}否则{
//因为我们还没有到达宽度的末端，所以增加滑块
$（“#滑动方向”）。设置动画({
右：'+=100%'
}, 1000);
}
//在每个间隔上，添加移动到右侧变量的幻灯片的宽度！
right+=parseInt（$（'#slidewindow'）.css（“right”）；
}, 2000);
滑动框{
宽度：80%；
边框：实心；
边框颜色：白色；
边界宽度：1em；
背景颜色：黄色；
显示：内联块；
溢出：隐藏；
}
#滑入{
浮动：左；
宽度：500%；
保证金：0；
位置：相对位置；
}
.imgs{
宽度：20%；
浮动：左；
保证金：0；
}

她

#slide-box{
    width: 80%;
    border: solid;
    border-color: white;
    border-width: 1rem;
    background-color: yellow;
    display: inline-block;
    overflow: hidden;

}

#slidewindow{
    float: left;
    width: 500%;
    margin: 0;
    position: relative;

}

.imgs{
    width: 20%;
    float: left;
    margin: 0 0 0 0;
}

setInterval(function(){ 
        $('#slidewindow').animate({
            right:'+=100%',

            }, 1000);
    }, 2000);