左右切换

<div class="wapper">
      
     <div class="section">
      <h2 class="title">热门活动</h2>
      <div class="activity" class="movie" id="activity-slide">
       <a href="javascript:void(0)" class="pg_left ps_pre hide">pre</a>
       <a href="javascript:void(0)" class="pg_right ps_next" >next</a>
       <ul class="clearfix">
        <li><a href="javascript:;">1</a></li>
        <li><a href="javascript:;">2</a></li>
        <li><a href="javascript:;">3</a></li>
        <li><a href="javascript:;">4</a></li>
        <li><a href="javascript:;">5</a></li>
       </ul>
      </div>
     </div>
     
</div>

(function($){
    $.photolist=function(a){
        var w_li = a.find("li").width();
        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();

        //判断每次滚动数量
        num=1;
        addlist();
        //点击滚动事件
        photoscroll();
        function addlist(){
            a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)});
        }
        function photoscroll(){
            a.find(".ps_pre").on("click",function(){
                if(now > 0){
                    now--;
                    if(now >= 0){
                        a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});
                    }
                }
            });
            a.find(".ps_next").on("click",function(){
                if (now < (lisize+addli)/num - 3){
                    console.log((lisize+addli)/num - 1);
                    now++;
                    if(now < (lisize+addli)/num){
                        a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)});
                        $('.ps_pre').show();
                    }
                }
            });
        }
    }
})(jQuery);
$.photolist($("#activity-slide"));

转载于:https://www.cnblogs.com/opcec/p/8275729.html