间隔滑动div-jQuery [英] Sliding through divs at interval - jQuery
问题描述
我有大约30个div的列表(请参阅下文.)，我想听听有关通过在顶部滑动一个并在设置的时间从底部移除一个的最佳方法进行旋转的任何建议.大约每5到10秒.另外，即使页面上有30个，我也只想显示10个列表，其余显示如前所述.
I have a list of around 30 divs (see below.) and would like to hear any suggestions on the best way to rotate through them by sliding in one at the top and removing one from the bottom at a set time. Something like every 5-10 seconds. Also even though there are 30 on the page I would only like to show a list of 10 and have the rest show as mentioned.
一个很好的例子是www.foursquare.com及其最近的活动部分.除了要使用预定数量的div而不是使用ajax进行实时处理外，我想做同样的事情.
A great example would be www.foursquare.com and their recent activity section. I would like to do the same except with a predetermined amount of divs instead of real-time using ajax.
任何向我指出正确方向的建议或帮助，将不胜感激.
Any suggestions or a bit of help pointing me in the right direction would be greatly appreciated.
<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>
在此先感谢您的帮助或想法！
Thanks in advance for any help or thoughts!
推荐答案
嘿...所以我将整个问题建模到一个新文件中.您应该可以对此进行调整以获得所需的内容:
Hey there... so I've modeled your entire problem into a new file. You should be able to tweak this to get what you need:
<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>
当您到达末尾时，此解决方案也会自动滚动到列表的开头.
This solution will automatically roll around to the beginning of the list when you reach the end as well.
这篇关于间隔滑动div-jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
