[jQuery] 배너 롤링 구현 코드

최근에 jQuery를 이용해서 여러 개의 이미지 배너가 계속해서 롤링되는 소스를 만들어야 했다. 한방향으로만

롤링이 되는 것이 아니라 좌, 우 버튼을 클릭하면 좌 또는 우로 롤링 방향이 바뀌어야 했는데.. 이걸 어떻게 구현

해야할지 막막하기만 했다. 그러다 문득 떠오른 생각이 현재 보이는 배너를 기준으로 다른 이미지 배너의 위치를

다시 정렬하는 것이었다. 예를 들어 왼쪽 버튼을 클릭하면 현재 보이는 배너를 기준으로 다른 배너는 오른쪽에

순차적으로 정렬을 시키는 것이었다. 그리고 나서 setInterval() 을 이용해서 배너의 위치값을 일정값씩 줄여서

계속해서 롤링이 되는 것처럼 보이도록 하면 될 것 같았다. 생각은 간단했는데.. 막상 구현해보니 여기저기 지뢰!!

아래는 위에서 말한 내용을 처리하는 function 부분이다.

function ChairRolling(direction)
{
    if(chair_count > 1) {
        if(direction == “Left”) {
            var temp_left_index = 0;
            var temp_x_pos = 0;

            $(‘#Chair li’).each(function(index) {
                var temp_left_pos = parseInt($(this).css(“left”));
                if(temp_left_pos == 0) {
                    temp_left_index = index;
                }
            });

            for(i = 0; i < chair_count; i++) {
                var idx = temp_left_index % chair_count;
                $(‘#Chair li’).eq(idx).css(“left”, temp_x_pos);
                temp_left_index++;
                temp_x_pos += 298;
            }

            if(!pos_interval) {
                $(‘#Chair li’).animate({
                    ‘left’: ‘-=298’
                    },
                    300
                );

                pos_interval = setInterval(“SetProductPos(‘Left’)”, 350);
            }
        } else {
            var temp_right_index = 0;
            var temp_x_pos = 0;

            $(‘#Chair li’).each(function(index) {
                var temp_right_pos = parseInt($(this).css(“left”));
                if(temp_right_pos == 0) {
                    temp_right_index = index;
                }
            });

            for(i = 0; i < chair_count; i++) {
                var idx = temp_right_index;
                $(‘#Chair li’).eq(idx).css(“left”, temp_x_pos);
                temp_right_index–;
                temp_x_pos -= 298;
            }

            if(!pos_interval) {
                $(‘#Chair li’).animate({
                    ‘left’: ‘+=298’
                    },
                    300
                );

                pos_interval = setInterval(“SetProductPos(‘Right’)”, 350);
            }
        }
    }
}

function SetProductPos(direction)
{
    var max_pos = 0;
    var min_pos = 0;
    var banner_idx;

    if(direction == “Left”) {
        $(‘#Chair li’).each(function(index) {
            var temp_pos = parseInt($(this).css(“left”));

            if(max_pos < temp_pos) {
                max_pos = temp_pos;
            }

            if(temp_pos < 0) {
                banner_idx = index;
            }
        });

        $(‘#Chair li:eq(‘ + banner_idx + ‘)’).css(“left”, (max_pos + 298));
    } else {
        $(‘#Chair li’).each(function(index) {
            var temp_pos = parseInt($(this).css(“left”));

            if(min_pos > temp_pos) {
                min_pos = temp_pos;
            }

            if(temp_pos > 0) {
                banner_idx = index;
            }
        });

        $(‘#Chair li:eq(‘ + banner_idx + ‘)’).css(“left”, (min_pos – 298));
    }

    if(pos_interval) {
        clearInterval(pos_interval);
        pos_interval = null;
    }
}

개념은 이렇다. 지금 보여지는 배너의 위치값과 index를 구한다. 그리고 나서 index 값을 기준으로 배너의 위치를

다시 정렬하고 jQuery animate()를 이용해서 위치를 이동시킨다. 그리고 나서 SetProductPos() 함수를 이용해서

가장 끝에 있는 배너의 위치값을 구해서 이전에 보였던 배너의 위치를 그 다음으로 지정해준다.

SetProductPos()를 호출할 때 animate() 함수의 콜백함수로 호출을 했더니 배너 개수만큼 실행이 돼서 이 부분을

해결하는데 시간을 많이 낭비했다. 결국 쓴 방법이 setInterval() 을 이용해서 animation 이 모든 끝난 후 실행되도록

해서 문제를 해결했는데 이렇게 해도 되는 건지 잘 모르겠다. 일단 원하는 대로 기능은 되는데 좀 더 코드를 다듬고

싶어도 지금은 딱히 떠오르는 방법이 없고.. ^^; 당분간은 더 좋은 생각이 떠오르기 전까지는 이걸 사용해야 할 듯!!