使元素自動並重復向上滾動

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/