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的位置向左移动，显示位于上一图像右侧的下一张图像，当它完全离开可见区域时，它会返回到初始图像位置并再次向左滑动。

我如何获得（这个脚本？）一直执行上述操作而不会在页面加载时崩溃？

编辑：整个想法是，时间永远不会停止。它基本上是一个“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达到＆gt;时终止超时1000

Answer 3

正如我评论的那样，因为这可能会让CSS有一段时间，我建议，作为提醒＆amp;替代，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与链接有点不同

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

3 个答案: