我已经找到了解决方案，但是对JQuery还是陌生的。
如何更改它，以便我一次可以显示三个div，单击下一个或上一个按钮时，它前进1，而不是一次只显示一个。
这是我正在查看的JS Fiddle：
http://jsfiddle.net/TrueBlueAussie/aVJBY/468/
这是JQuery：
function updateItems(delta)
{
var $items = $('#group').children();
var $current = $items.filter('.current');
$current = $current.length ? $current : $items.first();
var index = $current.index() + delta;
// Range check the new index
index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index);
$current.removeClass('current');
$current = $items.eq(index).addClass('current');
// Hide/show the next/prev
$("#prev").toggle(!$current.is($items.first()));
$("#next").toggle(!$current.is($items.last()));
}
$("#next").click(function () {
updateItems(1);
});
$("#prev").click(function () {
updateItems(-1);
});
// Cause initial selection
updateItems(0);
您可以通过这种方式进行操作，并且效果很好，但另一方面，我也相信可能会有一种更加优化的方法。
// give each div an id "#child1", "#child2", etc.
$("#group div").each(function(i) {
$(this).attr('id', "child" + (i + 1));
});
var First = 1;
var Second = 2;
var Third = 3;
$('#child'+First+', #child'+Second+', #child'+Third ).addClass('current');
// on next click, add +1 to First, Second and Third
$('#next').click(function(){
if( !$('#child'+First).is(':last-child') ) {
$("#group div").removeClass('current');
First++;
Second++;
Third++;
$('#child'+First+', #child'+Second+', #child'+Third ).addClass('current');
}
});
$('#prev').click(function(){
if( !$('#child'+Third).is(':first-child') ) {
$("#group div").removeClass('current');
First--;
Second--;
Third--;
$('#child'+First+', #child'+Second+', #child'+Third ).addClass('current');
}
});
在这里检查：http : //jsfiddle.net/aVJBY/551/
编辑：添加if(!$('#child'+First).is(':last-child'))，if(!$('#child'+Third).is(':first-child'))这样，总是至少有第一个或最后一个div可见
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句