div內自動滑動內容？

Question

所以我有一個設置寬度和高度的div，並且我想讓內部的內容自動滑動（不需要懸停或者用戶的交互），等待幾秒鐘後才能顯示不同的內容。我的實際目標是什麼，我有一個帶有音頻播放器的盒子和生成內容的音符，我希望它可以向下滑動或向左滑動，以展現藝術家的氣質。你可以在here看到我在說什麼。

哦，傻我。一個很好的例子就是Windows Phone 7的實時切片，這實際上是我將它從基礎上剝離下來的。

Answer 1

var swap = false; 
    var w = 309; 
    var h = 261;  
    var i = 0; 
    var x = 0; 
    var q = 1; 
    var t; 

    window.onload=function(){ 
     i = initPortfolio(); 
     setTimeout("portfolioRotate()",2000); 
    } 

    function initPortfolio(){ 
     $('.portfolio-item').each(function(index){i = i+1;}); 
     for(var n=1;n<=i;n=n+1){ 
      lpos = w * n - w; 
      $('#item-'+n).css('left',lpos); 
     } 
     $('.offs').css('display','block'); 
     x = i * w - w; 
     return i; 
    } 
    function portfolioRotate(){ 
     swap = false; 
     $('.portfolio-item').animate({left:'-='+w},6000,function(){ 
      nn = this.id.split("-")[1]; 
      if(q==nn && swap==false){ 
       $('#item-'+q).css('left',x); 
       if(q<i){q=q+1}else{q=1}; 
       swap = true; 
       u=setTimeout("portfolioRotate()",2000); 
      } 
     }); 
    } 

     <div id="portfolio-container"> 
      <div class="portfolio-item" id="item-1"></div> 
      <div class="portfolio-item" id="item-2"></div> 
      <div class="portfolio-item" id="item-3"></div> 
      <div class="portfolio-item offs" id="item-4"></div> 
     </div> 

    .offs{ 
     display:none; 
    } 
    #portfolio-container{ 
     width:927px; 
     height:318px; 
     margin-top:30px; 
     position:relative; 
     overflow:hidden; 
    } 
    .portfolio-item{ 
     width:309; 
     padding-top:20px; 
     position:absolute; 
     height:100%; 

    } 

這可能很糟糕，但我剛從最近的工作中解脫出來。讓我知道它是不是滑動，或需要解釋。使用jQuery。有可能有一種更好的方式來最初用css定位組件。