我有一份大约 30 个 div 的列表(见下文。)，并且希望听到有关旋转它们的最佳方式的建议，即在设定的时间滑入顶部的一个并从底部删除一个。大约每 5-10 秒一次。另外，即使页面上有 30 个，我也只想显示 10 个的列表，并按上述方式显示其余的。
一个很好的例子是 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>
预先感谢您的任何帮助或想法!
最佳答案
嘿那里...所以我已经将您的整个问题建模到一个新文件中。您应该能够调整它以获得您需要的内容:
<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>
当您到达末尾时，此解决方案也会自动滚动到列表的开头。
关于jquery - 间隔滑动 div - jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2851855/