jquery - 具有无限循环和 Sprite 的图像幻灯片

Question

我正在尝试用一张图片( Sprite )制作一个小型幻灯片，并将其设置为背景。我移动了它的位置，所以只有一部分可见，在一个专门为它制作的容器中。

我正在使用 javascript/jQuery 将位置移动 107px(一张图像的宽度) 但是如果我使用无限循环，我的脚本就会崩溃。

这是我尝试运行的:

var slideshow = function (){
    var pos = 0;
    while(pos < 1000){
        $('aside.slideshow').css('background-position', '-' + pos + 'px 0').delay(2500);
        pos += 107;
        if(pos > 429){
            pos = 0;
        }
    }
};
$(document).ready( function() {
    slideshow();
});

基本上应该是:每2500ms将我的图片位置向左移动107px，显示下一张图片，位于上一张图片的右边，完全离开可见区域后，回到初始位置位置并再次开始向左滑动。

如何让(这个脚本？)始终执行上述操作而不会在页面加载时崩溃？

编辑:整个想法是 while 永远不会停止。它基本上是一个“while(true)”循环

Answer 1

正如我评论的那样，由于这是 CSS 可以做一段时间的事情，我建议，作为提醒和替代，CSS 动画可以处理这个问题:

div {
  background: url(https://cdn.codeandweb.com/blog/2014/11/05/animate-sprites-in-css-with-texturepacker/capguy-walk.png);
  height: 320px;
  width: 190px;
  background-position: 0 0;
  animation: 2s walk steps(7, start);
  animation-iteration-count: 1000;
  float: left;
}
@keyframes walk {
  to {
    background-position: -1278px 0
  }
}
/* resize it ? */
div.bis {
  height: 160px;
  width: 85px;
  background-size: auto 100%;
}

<div id="slid"></div>
<div id="slid" class="bis"></div>

本教程中的图像拾取 https://www.codeandweb.com/blog/2014/11/05/animate-sprites-in-css-with-texturepacker

我的 css 与链接有点不同