码迷,mamicode.com
首页 > 其他好文 > 详细

左右点击效果,并且最后一个的时候按钮变灰或者消失

时间:2016-07-02 20:13:12      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:

效果: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‘});
            });
        }())

 

左右点击效果,并且最后一个的时候按钮变灰或者消失

标签:

原文地址:http://www.cnblogs.com/qianduanjingying/p/5635874.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!