如何连续垂直自动滚动div内容

时间:2009-12-10 13:01:01

标签: javascript jquery

我需要垂直滚动包含图像的div。任何帮助或参考将受到高度赞赏。

1 个答案:

答案 0 :(得分:2)

也许something like this会有所帮助?第一张和最后一张图片应该是相同的。

JS:

(function(){
  var box=document.getElementById('box');
  box.appendChild(box.firstChild.cloneNode());    

  function infScroll(){
    box.scrollTop +=1;
    if(box.scrollTop===300){
        box.scrollTop=0;
    }
    window.requestAnimationFrame(infScroll);
  }
  window.requestAnimationFrame(infScroll);
}());

HTML:

<div id="box" style="width:150px; height:100px; overflow:hidden;">
    <img src="http://placekitten.com/150/90" />
    <img src="http://placekitten.com/150/120" />
    <img src="http://placekitten.com/150/80" />
    <img src="http://placekitten.com/150/90" />
</div>