Question

我需要在div中放置自动滚动图像。我在这个页面上看到了水平自动滚动的代码 http://www.dynamicsights.com/cssscrollback.php 我稍微修改了它以将其转换为垂直自动滚动，但由于某种原因它停止工作。有人可以告诉我我做错了什么，是否有更简单的方法进行垂直自动滚动？

<div id="scroller"></div>

的CSS：

#scroller
{
width:250px; height:120px;
background-image:url(images/background.png); /* size of that image is 250x600 */
}

JS：

function StartMove()
{
var BGImage = new Image();
BGImage.src = "images/background.png";
window.cssMaxHeight = 600;
window.cssYPos = 0;
setInterval("MoveBackGround()", 50);
}

function MoveBackGround()
{
window.cssYPos ++;
if (window.cssYPos >= window.cssMaxHeight)
  {
  clearInterval(MoveBackGround())
  }
toMove=document.getElementById("scroller");
toMove.style.backgroundPosition="0 "+window.cssYPos+"px";
}

Answer 1

代码有很多全局变量，删除间隔是错误的。

(function() {
    var cssMaxHeight, cssYPos, interval, moveTo;

    function MoveBackGround() {
        cssYPos++;        
        if (cssYPos >= cssMaxHeight) {
            window.clearInterval(interval);
        }
        toMove = document.getElementById("scroller");
        toMove.style.backgroundPosition = "0 " + cssYPos + "px";
    }

    function StartMove() {
        var BGImage = new Image();
        BGImage.src = "images/background.png";
        cssMaxHeight = 600;
        cssYPos = 0;
        interval = setInterval(MoveBackGround, 50);
    }

    StartMove();

}());

如何在div中制作垂直自动滚动图像？

1 个答案: