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

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内自动向上滚动。另外我希望它每移动一格。

我可以使用<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/