具有无限循环和精灵的图像幻灯片

Question

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

我正在使用 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();
});

基本上应该是：每2500毫秒将我的图片位置向左移动107px，显示下一张图片，位于上一张图片的右侧，当它完全离开可见区域时，它returns到初始位置，再次开始向左滑动。

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

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

Answer 1

这是因为每次 pos 变量大于 429 时，它都会重置为 0，因此永远不会大于 1000。

你需要改变这个。

Answer 2

如果不使用 while 超时呢？

var pos = 0;
setInterval(function(){
    $('aside.slideshow').css('background-position', '-' + pos + 'px 0');
    pos += 107;
    if(pos > 429) pos = 0;
}, 2500);

一旦 pos 达到 > 1000，您就可以终止超时

Answer 3

正如我评论的那样，由于这是 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 与 link

有点不同

具有无限循环和精灵的图像幻灯片

Image slideshow with an infinite loop and a sprite

css

jquery

sprite

background-image

slideshow