左右点击效果,并且最后一个的时候按钮变灰或者消失
效果: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'}); }); }())
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步