在编写了许多自定义滑块之后，这是我使用的方法。我这样做是为了尽量减少创建的 jQuery 对象的数量。这是因为您从不测试以查找活动元素，它由变量管理。做任何像 $(elem:visable) 或 $(elem).hasClass 是浪费 jQuery 对象，你不应该使用 jQuery 来检测你的应用程序的状态，除非你真的必须这样做。
//create a universal block jQuery object, and give it an index property (current)
var blocks = $('div.blocks');
blocks.current = 0;
var next = $('.next'),
prev = $('.prev');
//make a universal slide handler
function blockControl(index){
//using hide and show here to fit your example,
//but this is where you would do slide or fades or whatever animation
//the important part is it is 'showing' based on .eq()
blocks.hide().eq(index).show();
}
//setup the initial state
blockControl(blocks.current);
next.on('click', function(){
//move current up one
blocks.current ++;
//test if its the last block
if( blocks.current >= blocks.length ){
//prevent over reach
blocks.current = blocks.length;
//handle how the last slide will work, you could loop back the beginning or
//whatever. Here we are just going to hide the next button.
next.fadeOut();
prev.fadeIn();
}else{
//insure prev button is visalbe
prev.fadeIn();
//do slider
blockControl(blocks.current);
}
});
prev.on('click', function(){
//move current down one
blocks.current --;
//test if its the first block
if( blocks.current <= 0 ){
//prevent negative numbers
blocks.current = 0;
//Here we are just going to hide the prev button. But we also could put in control
//to loop the last or whatever
prev.fadeOut();
next.fadeIn();
}else{
//insure next button is visalbe
next.fadeIn();
//do slider
blockControl(blocks.current);
}
});
这里的逻辑分离很重要。拥有一个控制块可视性的处理程序意味着它可以由箭头以外的东西触发。箭头逻辑和控制器逻辑也可以相互独立地改变。此外，您始终可以从应用程序的任何部分访问当前正在显示的元素，而无需测试或查询。
我希望您真正理解这里的概念以及为什么它会以这种方式分离出来。此模式可用于几乎任何类型的滑块或内容旋转器。例如，如果您想要小的可点击项目符号指示器，它很容易挂钩：
var bullets = $('a.bullet');
bullets.on('click',function(){
var index = $(this).index();
bullets.removeClass('active').eq(index).addClass('active');
blockControl(index);
});
等等。
如果您将其设为 OO 样式，这会变得更酷，因此您可以在一个页面上拥有多个滑块。不过那是另一回事了。