間隔滑動通過div - jQuery

我有一個大約30個divs的列表（見下文），並希望聽到任何關於最好的方法來通過他們在頂部滑動一個，並從中刪除一個在設定的時間底部。像每5-10秒一樣。此外，即使頁面上有30個，我也只想顯示10個列表，其餘顯示如上所述。間隔滑動通過div - jQuery

一個很好的例子是www.foursquare.com及其最近的活動部分。除了使用預定量的div而不是實時使用ajax之外，我還想這樣做。

任何建議或一點幫助指向我在正確的方向將不勝感激。

<div class="recent-questions"> 

<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 

<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 
<div class="recent-question"></div> 

</div>

在此先感謝您的任何幫助或想法！

來源

2010-05-17 Phillip L.

嘿......所以我模仿你的整個問題變成一個新的文件。你應該能夠調整它來獲取你所需要的：當你到達終點以及

<html> 
    <head> 
    <title>Shift Test</title> 
    <style> 
     .recentQuestion { border: 1px solid blue; height: 50px; width: 150px; } 
    </style> 
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    </head> 
    <body> 
    <div style="overflow: hidden; height: 250px;"> 
    <div class="recentQuestion" id="div0" style="display: none;"> 
     This is some content 0. 
    </div> 
    <div class="recentQuestion" id="div1" style="display: none;"> 
     This is some content 1. 
    </div> 
    <div class="recentQuestion" id="div2" style="display: none;"> 
     This is some content 2. 
    </div> 
    <div class="recentQuestion" id="div3" style="display: none;"> 
     This is some content 3. 
    </div> 
    <div class="recentQuestion" id="div4" style="display: none;"> 
     This is some content 4. 
    </div> 
    <div class="recentQuestion" id="div5" style="display: none;"> 
     This is some content 5. 
    </div> 
    <div class="recentQuestion" id="div6" style="display: none;"> 
     This is some content 6. 
    </div> 
    <div class="recentQuestion" id="div7" style="display: none;"> 
     This is some content 7. 
    </div> 
    <div class="recentQuestion" id="div8" style="display: none;"> 
     This is some content 8. 
    </div> 
    <div class="recentQuestion" id="div9" style="display: none;"> 
     This is some content 9. 
    </div> 
    <div class="recentQuestion" id="div10" style="display: none;"> 
     This is some content 10. 
    </div> 
    <div class="recentQuestion" id="div11" style="display: none;"> 
     This is some content 11. 
    </div> 
    <div class="recentQuestion" id="div12" style="display: none;"> 
     This is some content 12. 
    </div> 
    <div class="recentQuestion" id="div13" style="display: none;"> 
     This is some content 13. 
    </div> 
    <div class="recentQuestion" id="div14" style="display: none;"> 
     This is some content 14. 
    </div> 
    <div class="recentQuestion" id="div15"> 
     This is some content 15. 
    </div> 
    <div class="recentQuestion" id="div16"> 
     This is some content 16. 
    </div> 
    <div class="recentQuestion" id="div17"> 
     This is some content 17. 
    </div> 
    <div class="recentQuestion" id="div18"> 
     This is some content 18. 
    </div> 
    <div class="recentQuestion" id="div19"> 
     This is some content 19. 
    </div> 
    </div> 

    <br/> 
    <br/> 
    <br/> 

    <div style="border: 1px solid red; height: 30px; width: 200px;"> 
     <a href="javascript:void(0);" id="pauseShifting">Pause/Resume</a> 
    </div> 

    <script type="text/javascript" language="javascript"> 
     var intervalId = null; 
     var indicesToShow = new Array(); 

     $(document).ready(function() 
     { 
      indicesToShow.push(15); 
      indicesToShow.push(16); 
     indicesToShow.push(17); 
     indicesToShow.push(18); 
     indicesToShow.push(19); 

     intervalId = setInterval(function() 
     { 
      shiftDivs(); 
     }, 2000); 

     $('#pauseShifting').click(function() 
     { 
      if(intervalId != null) 
      { 
      clearInterval(intervalId); 
      intervalId = null; 
      } 
      else 
      { 
       shiftDivs(); 
       intervalId = setInterval(function() 
       { 
       shiftDivs(); 
       }, 2000); 
      } 
     }); 
    }); 

    function shiftDivs() 
    { 
     var newSetOfImages = new Array(); 

     if(indicesToShow[0] == 0) 
     { 
      newSetOfImages.push(15); 
      newSetOfImages.push(16); 
      newSetOfImages.push(17); 
      newSetOfImages.push(18); 
      newSetOfImages.push(19); 

      for(var j = 0; j < 5; j++) 
      { 
      $('#div' + indicesToShow[j]).slideUp('fast'); 
      $('#div' + newSetOfImages[j]).slideDown('fast'); 
      } 

      indicesToShow = newSetOfImages; 
      return; 
     } 
     else 
      newSetOfImages.push(indicesToShow[0] - 1); 

     newSetOfImages.push(indicesToShow[0]); 
     newSetOfImages.push(indicesToShow[1]); 
     newSetOfImages.push(indicesToShow[2]); 
     newSetOfImages.push(indicesToShow[3]); 

     $('#div' + indicesToShow[4]).slideUp('fast'); 
     $('#div' + newSetOfImages[0]).slideDown('fast'); 

     indicesToShow = newSetOfImages; 
    } 
</script> 
    </body> 
</html>

該解決方案將自動打滾到列表的開頭。

來源

2010-05-22 05:03:52 Tejs

Hi Tejs！我欠你大時間的男人！如果我能做任何事情來報答你的幫助，請告訴我！我花了一點時間來計算編號，但現在我的div正在旋轉，暫停/播放點擊就像一個魅力！再次感謝！ – 2010-05-24 01:42:46

它不是特定的jQuery特定的，但你只需要在JavaScript中使用間隔。

function shiftDivs() 
{ 
    $('div:last').remove(); 
    $('div:first').before(myNewDivElement); // Pseudo 
} 

setInterval(function() 
{ 
    shiftDivs(); 
}, 5000);

間隔函數將每5秒調用一次。

我舉個例子。如果你不會做ajax，你可能會想從30個div的底部開始並向上移動。所以我們會顯示div 20到29.（假設0-29 div索引）。你設置你的html最初有

style="display:none"

在div 0-19。然後，您可以使用此代碼：

var headIndex = 19; 
var intervalId = null; 

$(document).ready(function() 
{ 
    intervalId = setInterval(function() 
    { 
     shiftDivs(); 

     if(headIndex == -1) 
      clearInterval(intervalId); 
    }, 5000); 
}); 

function shiftDivs() 
{ 
    $($('div')[headIndex]).slideDown(); 
    $($('div')[headIndex + 10]).slideUp(); 
    headIndex--; 
}

暫停其他例如：

function pauseShift() 
{ 
    if(intervalId != null) // Currently Not Paused 
    { 
     clearInterval(intervalId); 
    } 
    else // Paused 
    { 
     ShiftDivs(); // Only include this if you want the shift to occur immediately on resume 
     intervalId = setInterval(function() 
     { 
      shiftDivs(); 

      if(headIndex == -1) 
       clearInterval(intervalId); 
     }, 5000); 
    } 
}

來源

2010-05-17 19:08:08 Tejs

謝謝Tejs - 有點過頭了，但我很感激幫助。如果您有更詳細的解釋，請告訴我。 – 2010-05-17 19:16:49

謝謝Tejs !!!!你幫了我很大的忙！非常感謝 – 2010-05-17 20:49:31

更快一個。這可能或不可能，我不確定。每個div內都有一個錨標籤。如果點擊此錨點，可以阻止div滑動直到再次點擊？再次感謝您的幫助！ – 2010-05-17 21:08:02

間隔滑動通過div - jQuery

回答

相關問題