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

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();
});

基本上它应该：每2500ms向左移动我的图像107px的位置，显示位于前一张图像右侧的下一张图像，当它完全脱离可见区域时，它返回到初始位置并开始再次向左滑动。

如何获得（此脚本？）始终执行上述操作而不会导致页面加载崩溃？

编辑：整个想法是那一刻永远不会停止。 它基本上是一个“ while（true）”循环

Answer 1

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

您需要更改此设置。

Answer 2

而不是仅使用超时时间呢？

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与链接有点不同