学习笔记

在原代码基础上，根据我的需求是，左右两个按钮一直显示，所以去把btnshow（）方法的注释，运行出现bug，所以我给左右按钮做了if判断，if(now>0) and if(noe<(lisize+addli)/num - 1)来限制，效果不错。

html结构：
<div class="tab-friend" id="activity-slide">
    <span class="wid-left ps_pre"><img src="images/20170322/left_img_btns_2.png" alt=""></span>
    <div class="width-1130px">
        <div class="box-list">
            <div class="tab-list ">
                <ul>
                    <li class="span-div"><a href="#3"><span class="img_fri_bg0"></span></a></li>
                    <li class="span-div"><a href="#3"><span class="img_fri_bg1"></span></a></li>
                    <li class="span-div"><a href="#3"><span class="img_fri_bg2"></span></a></li>
                    <li class="span-div"><a href="#3"><span class="img_fri_bg3"></span></a></li>
                    <li class="span-div lsat-sd"><a href="#3"><span class="img_fri_bg4"></span></a></li>
                    <li class="span-div"><a href="#3"><span class="img_fri_bg5"></span></a></li>
                    <li class="span-div"><a href="#3"><span class="img_fri_bg6"></span></a></li>
                    <li class="span-div"><a href="#3"><span class="img_fri_bg7"></span></a></li>
                    <li class="span-div"><a href="#3"><span class="img_fri_bg8"></span></a></li>
                    <li class="span-div lsat-sd"><a href="#3"><span class="img_fri_bg9"></span></a></li>
                    <li class="span-div"><a href="#3"><span class="img_fri_bg10"></span></a></li>
                    <li class="span-div"><a href="#3"><span class="img_fri_bg11"></span></a></li>
                    <li class="span-div"><a href="#3"><span class="img_fri_bg12"></span></a></li>
                    <li class="span-div"><a href="#3"><span class="img_fri_bg13"></span></a></li>
                </ul>
            </div>
        </div>
    </div>
    <span class="wid-right ps_next"><img src="images/20170322/right_img_btns_1.png" alt=""></span>
</div>

js：修改后的代码
//首页图片滚动切换
(function($){
    $.photolist=function(a){
        var w_li = a.find("li").width();
        var h_li = a.find("li").height();
        var margin_li=parseInt(a.find("li").css("marginLeft"));
        var now = 0;
        var num = 0;
        var addli = 0;
        var lisize = a.find("ul li").size();
        var htmlall = a.find("ul").html();

        //判断每次滚动数量
        /*
         var w_body = $("body").width();
         if(w_body <=1170){
         var num = 3;
         }else if(w_body<= 1380){
         var num = 4;
         }else if(w_body>1380){
         var num = 5;
         }
         */
        var num=5;

        //判断需要添加的li节点数量
        var reminder=lisize%num;
        if(lisize%num!=0){addli = num-reminder;}
        else{addli = 0;}
        addlist();
        //点击滚动事件
        photoscroll();

        $(window).resize(function(){
            //location.reload();
            now = 0;
            addli = 0;
            a.find("ul").html(htmlall);//html内容还原初始值
            //a.find(".ps_next").show();//按钮样式初始化
            //a.find(".ps_pre").hide();
            //判断每次滚动数量
            /*
             var w_body = $("body").width();
             if(w_body <=1170){
             var num = 3;
             }else if(w_body<= 1380){
             var num = 4;
             }else if(w_body>1380){
             var num = 5;
             }
             */
            var num=5;
            //判断需要添加的li节点数量
            var reminder=lisize%num;
            if(lisize%num!=0){addli = num-reminder;}
            else{addli = 0;}
            addlist();
            w_li = a.find("li").width();
            margin_li=parseInt(a.find("li").css("marginLeft"));
            a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});
            a.find("ul").animate({"margin-left":0});//ul位置还原
            //btnshow(now,parseInt((lisize+addli)/num),lisize,num);
        });


        function addlist(){
            for(i=0;i<addli;i++){
                var html = a.find("ul li").eq(i).html();
                a.find("ul").append("<li>"+html+"</li>");
            }
            a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});
            //console.log(a.find("ul li").size());
        }
        function photoscroll(){
            a.find(".ps_pre").on("click",function(){//console.log(num);
                if(now > 0){
                    now--;
                    if(now >= 0){
                        a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});
                        //btnshow(now,parseInt((lisize+addli)/num),lisize,num);
                    }
                }

            });

            a.find(".ps_next").on("click",function(){//console.log(num);
                if (now < (lisize+addli)/num - 1){
                    now++;
                    if(now < (lisize+addli)/num){
                        a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});
                        //btnshow(now,parseInt((lisize+addli)/num),lisize,num);
                    }
                }

            });
            //btnshow(now,parseInt((lisize+addli)/num),lisize,num);
        }
        /***
         参数说明：
         now:当前是第几组，默认是0
         c:总共有几组
         d:初始化时li的个数
         e:每组显示li个数
         ***/
        function btnshow(now,c,d,e){
            if(d<=e){//如果初始化时li的个数小于一组要显示的数，则不显示pre和next按钮
                a.find(".ps_next").hide();
                a.find(".ps_pre").hide();

            }else if(now==0){//初始化now=0，显示第一组，只显示next
                a.find(".ps_next").show();
                a.find(".ps_pre").hide();

            }else if(now==c-1){//显示到最后一组，只显示pre
                a.find(".ps_next").hide();
                a.find(".ps_pre").show();

            }else{//显示中间组，pre和next都需要显示
                a.find(".ps_next").show();
                a.find(".ps_pre").show();

            }
        }

    }
})(jQuery);
$.photolist($("#activity-slide"));




源代码（感谢原作者）

//首页图片滚动切换
(function($){
    $.photolist=function(a){
        var w_li = a.find("li").width();
        var h_li = a.find("li").height();
        var margin_li=parseInt(a.find("li").css("marginLeft"));
        var now = 0;
        var num = 0;
        var addli = 0;
        var lisize = a.find("ul li").size();
        var htmlall = a.find("ul").html();

        //判断每次滚动数量
        /*
         var w_body = $("body").width();
         if(w_body <=1170){
         var num = 3;
         }else if(w_body<= 1380){
         var num = 4;
         }else if(w_body>1380){
         var num = 5;
         }
         */
        var num=5;

        //判断需要添加的li节点数量
        var reminder=lisize%num;
        if(lisize%num!=0){addli = num-reminder;}
        else{addli = 0;}
        addlist();
        //点击滚动事件
        photoscroll();

        $(window).resize(function(){
            //location.reload();
            now = 0;
            addli = 0;
            a.find("ul").html(htmlall);//html内容还原初始值
            //a.find(".ps_next").show();//按钮样式初始化
            //a.find(".ps_pre").hide();
            //判断每次滚动数量
            /*
             var w_body = $("body").width();
             if(w_body <=1170){
             var num = 3;
             }else if(w_body<= 1380){
             var num = 4;
             }else if(w_body>1380){
             var num = 5;
             }
             */
            var num=5;
            //判断需要添加的li节点数量
            var reminder=lisize%num;
            if(lisize%num!=0){addli = num-reminder;}
            else{addli = 0;}
            addlist();
            w_li = a.find("li").width();
            margin_li=parseInt(a.find("li").css("marginLeft"));
            a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});
            a.find("ul").animate({"margin-left":0});//ul位置还原
            btnshow(now,parseInt((lisize+addli)/num),lisize,num);
        });


        function addlist(){
            for(i=0;i<addli;i++){
                var html = a.find("ul li").eq(i).html();
                a.find("ul").append("<li>"+html+"</li>");
            }
            a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});
            //console.log(a.find("ul li").size());
        }
        function photoscroll(){
            a.find(".ps_pre").on("click",function(){//console.log(num);
                
                    now--;
                    if(now >= 0){
                        a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});
                        btnshow(now,parseInt((lisize+addli)/num),lisize,num);
                    }
               

            });

            a.find(".ps_next").on("click",function(){//console.log(num);
        
                    now++;
                    if(now < (lisize+addli)/num){
                        a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});
                        btnshow(now,parseInt((lisize+addli)/num),lisize,num);
                    }
               

            });
            btnshow(now,parseInt((lisize+addli)/num),lisize,num);
        }
        /***
         参数说明：
         now:当前是第几组，默认是0
         c:总共有几组
         d:初始化时li的个数
         e:每组显示li个数
         ***/
        function btnshow(now,c,d,e){
            if(d<=e){//如果初始化时li的个数小于一组要显示的数，则不显示pre和next按钮
                a.find(".ps_next").hide();
                a.find(".ps_pre").hide();

            }else if(now==0){//初始化now=0，显示第一组，只显示next
                a.find(".ps_next").show();
                a.find(".ps_pre").hide();

            }else if(now==c-1){//显示到最后一组，只显示pre
                a.find(".ps_next").hide();
                a.find(".ps_pre").show();

            }else{//显示中间组，pre和next都需要显示
                a.find(".ps_next").show();
                a.find(".ps_pre").show();

            }
        }

    }
})(jQuery);
$.photolist($("#activity-slide"));