滚动图片代码修改宽度后，只滚动两张

Question

网上找的现成代码套的，源代码里面滚动的图片是120x75，我改成了宽度1174x194的长图片，结果滚动了两张就不滚了。
箭头图标也会自己变成灰色。
我知道应该js代码的问题，我看上面提示了是怎么减的那个原理。
但是看半天实在是看不很懂，请大神指点一下，谢谢

<div class="ind08">
<b>合作客户</b>

<div class="pic_con">
    <div class="btn_change left_btn">上一页</div>
    <div class="btn_change right_btn">下一页</div>
    <div class="pic_content">
        <div class="pic_lists">
            <ul>
                <li><img src="img/logoad_01.jpg"/></li>
                <li><img src="img/logoad_01.jpg"/></li>
                <li><img src="img/logoad_01.jpg"/></li>
                <li><img src="img/logoad_01.jpg"/></li>


            </ul>
        </div>
    </div>

</div>

<!--
  slidebar 产品展示图jquery 原理:
    显示区域：定义显示去的宽高，设置多余的元素隐藏、overflow:hidde;
    图片存储区：是显示去的子元素，它的宽度可以存下所有的图片信息；设置它的绝对位置；
    通过jquery动态控制图片存储区的left属性；
-->
<script type="text/javascript">
$(function(){ 

    var page=1;
    var i=3;
    var $p_Div=$(".pic_content");
    var $picDiv=$(".pic_lists");
    var picNum=$picDiv.children("ul").children("li").length;
    var page_count=Math.ceil(picNum/3);
    var $pDiv_w=$p_Div.width()+12;

    $(".right_btn").click(function(){
        if(page_count>page){
            $picDiv.animate({left:'-'+page*$pDiv_w+"px"},"normal");
            page++;
            $(".left_btn").css({'background':'url(img/leftstart.jpg) no-repeat'});
            if(page>=page_count){
                $(this).css({'background':'url(img/rightstop.jpg) no-repeat'});
            }else{
                $(this).css({'background':'url(img/rightstart.jpg) no-repeat'});
            }
        } 
        $(this).siblings(".highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current");     
    });

    $(".left_btn").click(function(){
        if(page>1){
            $picDiv.animate({left:"+="+$pDiv_w+'px'},"normal");
            page--;
            $(".right_btn").css({'background':'url(img/rightstart.jpg) no-repeat'});
            if(page<=1){
                $(this).css({'background':'url(img/leftstop.jpg) no-repeat'});   
            }else{
                $(this).css({'background':'url(img/leftstart.jpg) no-repeat'});
            }
        }
        $(this).siblings(".highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current");     
    });

    $(".pic_lists>ul>li").hover(function(){
        $(this).children("p").show();
    },function(){
        $(this).children("p").hide();
    });

})
</script>
</div>

我觉得应该是这部分js代码的问题。好像是用li的宽度来判断的，但是实在是看不懂了，js很多地方不懂

下面是css代码

.pic_con{width:1200px;padding:10px;margin:50px auto 0px;position:relative}
.pic_lists{float:left;width:8888px;height:200px;overflow:hidden;position:absolute;top:0px;left:0px}
.btn_change{width:105px;height:173px;position:absolute;text-indent:-9999px;cursor:pointer}
.left_btn{background:url(../img/leftstop.jpg) no-repeat;top:75px;left:-88px; width:105px; height:173px;}
.right_btn{background:url(../img/rightstart.jpg) no-repeat;top:75px;right:-108px;width:105px; height:173px; }

.pic_content{overflow:hidden;height:200px;loat:left;width:1200px;padding:10px;position:relative;margin:50px auto 0px; background:#FFFFFF;border-radius:20px;}
.pic_content ul li{float:left;width:1200px;height:100px;padding:3px;text-align:center;margin:0 0 0 10px;position:relative}

.pic_content ul li a img{width:150px;height:200px}

.highlight_tip{width:50%;position:relative;margin:0 auto;top: -15px;left: 20%;}
.highlight_tip span{height:24px;padding:5px;line-height:24px;float:left;margin:0 2px;cursor:pointer}
.highlight_tip span.current{height:18px;width:18px;line-height:18px;background:#9CC;text-align:center}

Answer 1

var page_count=Math.ceil(picNum/3);

这行代码有问题，改成 var page_count=picNum；