左右点击效果,并且最后一个的时候按钮变灰或者消失
效果:http://runjs.cn/code/6czpjsqq
程序思维:能复用就复用。把连个点击事件变成一个。在里面进行判断。第一个和最后一个判断的特殊处理。
因为index初始化为0,点击一下next+1,所以第二个就是1,所以就是按下标走的,最后一个就是length-1;所以判断的时候应该就是
index<length-1{index++};
index>0{index--};
但是左右箭头不同,它的是
index>length-2||index<1{}
;(function(){ var dire = '.dire li'; var nav = '.nav'; var $nav = $('.nav'); var next = '.dire .next'; var prev = '.dire .prev'; var w = $nav.width(); var index = 0; var length = $nav.find('li').length; $(document).on('click',dire,function(){ var _this = $(this); if(_this.is(next)&&index<length-1){ index++; } if(_this.is(prev)&&index>0){ index--; } if(index<1||index>length-2){ _this.fadeOut(); }else{ $(dire).fadeIn(); } console.log(index); $nav.stop().animate({left:-w*index+'px'}); }); }())