스크롤 롤링배너가 4개중 한개씩 위로 롤링되야 하는데 뭐가 문제이지 4개자체가 한꺼번에 올라갑니다.

현재제작중인 샘플site

<script type="text/javascript">
$(function(){

    function latestCardBanner(){
        var dir=-1;
        var count=1;
        var num=$(".card_banner_wrap > ul > li").length; // li 갯수
        var animatedly = false;

        function roll(direct){
            var bbi=$(".card_banner_wrap").height(); // ul을 감싸는 div

                    if(animatedly == true ) {
                            return;
                    }
                    animatedly = true;

                    if (direct != -1){
                         $(".card_banner_wrap ul > li:last-child").prependTo($(".card_banner_wrap > ul"));
                         $(".card_banner_wrap ul").css("margin-top", -bbi );
                         $(".card_banner_wrap ul").stop().animate({"marginTop":0},800,function(){
                                 animatedly = false;
                        });
                    }else{
                        $(".card_banner_wrap ul").stop().animate({"marginTop":-bbi},800,function(){
                            $(">li:first-child",this).appendTo($(this));
                            $(".card_banner_wrap ul").css("margin-top",0);
                                animatedly = false;
                        });
                    }
            };

        // 배너 2개 이상일때 3초 자동롤링 실행
        var autoRoll = null;
        function rnSaleBnrRoll(){
            if ($(".card_banner_wrap ul > li").length > 1){ // 배너가 두개부터 실행
                    autoRoll=setInterval(function(){
                    roll(-1);
                    if (count<num){ // 자동롤링 중 li 갯수가 1보다 클때 실행
                        count++
                    }else{ // 자동롤링 중 li 갯수가 1보다 작거나 같을 때 실행
                        count=0;
                    };
                },9000);
            };
        };
        // 마우스 오버시 정지, 높이값 커짐
        if ($(".card_banner_wrap ul > li").length > 1){
            $(".card_banner_wrap ul").on("mouseenter", function(){
                clearInterval(autoRoll);
                $(this).parents(".card_banner_wrap").stop().animate({height:$(this).find("li").height()*$(this).find("li").length+"px"}, 135);
                $(this).parents(".card_banner_wrap").addClass("on");
                $(".card_banner_wrap .card_banner_btn").hide();
            }).on("mouseleave", function(){
                $(this).parents(".card_banner_wrap").stop().animate({height:$(this).find("li").height()+"px"}, 135);
                $(this).parents(".card_banner_wrap").removeClass("on");
                $(".card_banner_wrap .card_banner_btn").show();
                rnSaleBnrRoll()
            });
        };

        // 버튼
        $(".card_banner_wrap > span.card_banner_btn a").click(function(){
            clearInterval(autoRoll);
            if($(this).index()==0) dir=1; else dir=-1; //(화살표) 위아래 방향기능
            roll(dir); //(화살표) 위아래 방향기능
            autoRoll=setInterval(function(){
                roll(-1);
                if(dir==-1){
                    if(count<num) count++;else count=0;
                }else{
                    if(count>0) count--; else count=num;
                }
            }, 9000);
        });

        // 배너 2개 이상일때 자동롤링 함수 실행
        rnSaleBnrRoll();

        // 배너 1개일 경우 버튼 비노출 처리
        if ($(".card_banner_wrap ul > li").length > 1){
            $(".card_banner_wrap .card_banner_btn").css("display","block");
        }else {
            $(".card_banner_wrap .card_banner_btn").css("display","none");
        }
    };

    latestCardBanner();

});
</script>