javascript - 使元素自动并重复向上滚动

Question

<div id="par">
  <div id="item11"></div>
  <div id="item12"></div>
  <div id="item13"></div>
  <div id="item14"></div>
  ....
</div>

我想让div#itemXX元素在div#par. 我也希望它每次移动一个 div。

我可以使用<marquee>标签，但它已被弃用，所以我想知道是否有其他方法？

顺便说一句，高度div#itemXX不固定。

更新： 我希望“div#itemXX”每次移动一个。就像幻灯片一样，每次显示一个div，但是如果当前div的高度大于视口，它应该向上滚动，当滚动结束时，下一个div（幻灯片）应该向上移动。

Answer 1

(function(){
var top=0;
var par = document.getElementById('par')
var scroll = function() {
  top++;
  if( top>=par.firstElementChild.offsetHeight )
  {
    //first element is out of sight, so move to the end of the list
    top=0;
    par.firstElementChild.style.marginTop='';//reset to zero
    par.appendChild(par.firstElementChild);
  }
  else
  {
     //move the first element 'top' px up
     par.firstElementChild.style.marginTop='-'+top+'px';
  }
  setTimeout(scroll, 100);//repeat after 100ms
}
scroll();
})()

jsbin：http: //jsbin.com/onohan/3/