一次显示或循环3个div
一次显示或循环3个div
提问于 2013-01-23 00:48:24
我在我的页面上有一个部分，那就是一次显示3个div，尽管可能有额外的div隐藏。
通过点击“更多”按钮，接下来的3个div将淡入，之前的将淡出。
因此，如果我们有6个div，则会显示前3个div，单击More按钮，将显示div 4-6。
如果可能，应该始终显示3个div。
例如，如果我们有5个div，那么当您单击More按钮时，将显示div 3-5。
我知道有一个名为jCarousel的jquery插件可以做到这一点，但我想知道在没有插件的情况下是否可能做到这一点，因为我正在构建一个响应式网站，而carousel插件使用固定大小的DIVs。
编辑: HTML：
<a class="more" href="#">More</a>
<div id="container">
<div class="item"><div>One</div><div>some more text</div></div>
<div class="item"><div>Two</div><div>some more text</div></div>
<div class="item"><div>Three</div><div>some more text</div></div>
<div class="item"><div>Four</div><div>some more text</div></div>
<div class="item"><div>Five</div><div>some more text</div></div>
<div class="item"><div>Six</div><div>some more text</div></div>
</div>Javascript：
$("#container .item").slice(0,3).show();
$(".more").click(function(event) {
var $currElements = $("#container .item:visible");
var $nextElements = $("#container .item:hidden");
$currElements.hide();
$nextElements.show();
event.preventDefault();
});这就是我目前所拥有的：http://jsfiddle.net/Wnp5J/
现在只是想知道，当你再次点击按钮时，是否有可能循环回到前3项。
另外，如果可能的话，总是显示3个项目。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-01-23 02:42:20
jsFiddle：Paging & transitions
jsFiddle：Paging (页面始终为满)
jsFiddle：Carousel
适用于任意数量的元素。
寻呼：
$("#container .item").slice(0,3).show();
$(".more").click(function() {
var items = $('#container .item:visible').hide().last();
var nextItems = items.nextAll().slice(0, 3);
if (nextItems.length === 0) {
nextItems = $("#container .item").slice(0, 3);
}
nextItems.show();
});使用过渡的寻呼：
$("#container .item").slice(0,3).show();
$(".more").click(function() {
var items = $('#container .item:visible');
var nextItems = items.last().nextAll().slice(0, 3);
if (nextItems.length === 0) {
nextItems = $("#container .item").slice(0, 3);
}
items.stop().hide(500, function() {
nextItems.show(500);
});
});分页(分页始终为满)：
$("#container .item").slice(0,3).show();
$(".more").click(function() {
var items = $('#container .item:visible').hide().last();
var nextItems = items.nextAll().slice(0, 3);
if (nextItems.length === 1) {
nextItems = $("#container .item").slice(-3);
}
if (nextItems.length === 0) {
nextItems = $("#container .item").slice(0, 3);
}
nextItems.show();
});旋转木马：
$(function() {
var container = $('#container');
var cycle = function() {
container.find('.item')
.hide()
.slice(0, 3)
.appendTo(container)
.show();
}
$(".more").click(function() {
cycle();
});
cycle();
});Stack Overflow用户
发布于 2013-01-23 02:42:42
我承认我被你的要求搞糊涂了。这里有一个想法。
$(".more").click(function (event) {
$("#container .item").slice(3, 99).toggle();
});http://jsfiddle.net/Wnp5J/4/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14463715
复制相关文章
相似问题
腾讯云开发者
