以间隔滑动div – jQuery

我有一个大约30个div的列表（见下文。），并希望听到有关通过在顶部滑动一个并在设定时间从底部移除一个旋转它们的最佳方法的任何建议。 像每5-10秒一样。 即使页面上有30个，我也只想显示10个列表并按照提到的其余显示。

一个很好的例子是www.foursquare.com和他们最近的活动部分。 我想做同样的事情，除了使用预定数量的div而不是实时使用ajax。

任何建议或一些帮助指出我正确的方向将不胜感激。

提前感谢任何帮助或想法！

Answer 1

嘿那里……所以我把你的整个问题建模成一个新文件。 你应该能够调整它以获得你需要的东西：

        
 
 This is some content 0. 
 
 This is some content 1. 
 
 This is some content 2. 
 
 This is some content 3. 
 
 This is some content 4. 
 
 This is some content 5. 
 
 This is some content 6. 
 
 This is some content 7. 
 
 This is some content 8. 
 
 This is some content 9. 
 
 This is some content 10. 
 
 This is some content 11. 
 
 This is some content 12. 
 
 This is some content 13. 
 
 This is some content 14. 
 
 This is some content 15. 
 
 This is some content 16. 
 
 This is some content 17. 
 
 This is some content 18. 
 
 This is some content 19. 
 
 
 
 
 
 Pause / Resume 
    

当您到达终点时，此解决方案将自动滚动到列表的开头。

Answer 2

它并不特别针对jQuery，但您只需要在JavaScript中使用间隔。

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

间隔function将每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); } }