[jQuery] 위로 롤링되는 코드

오랜만에 만들어본 jQuery 롤링 코드이다. 아래와 같은 문서구조에서 li 가 위로 롤링되는 것이다.

<ul>
    <li>
        <div>이미지</div>
        <div>이미지</div>
        <div>이미지</div>
    </li>
    <li>
        <div>이미지</div>
        <div>이미지</div>
        <div>이미지</div>
    </li>
</ul>

그리고 아래는 css 코드이다. 설명을 위해 간단하게 작성했기 때문에 실제 적용은 안될 수 있다.

ul { position: relative; width: 700px; height: 300px; overflow-y: hidden; }
li { position: absolute; top: 300px; left: 0; width: 700px; height: 300px; }
div { float: left: }

그리고 위로 롤링되도록 하는 jQuery 코드이다.

<script>
$(function() {
    var $sct = $("li");
    var height = $("ul").height();
    var count = $sct.size();
    var c_idx = o_idx = 0;
    var time = 5000;
    var a_time = 800;
    var interval = null;

    if(count > 1)
        interval = setInterval(top_rolling, time);

    $sct.hover(
        function() {
            if(interval != null)
                clearInterval(interval);
        },
        function() {
            if(interval != null)
                clearInterval(interval);

            if(count > 1)
                interval = setInterval(top_rolling, time);
        }
    );

    function top_rolling() {
        $sct.eq(o_idx).animate(
            { top: "-="+height+"px" }, a_time
        );

        c_idx = (o_idx + 1) % count;

        $sct.eq(c_idx).css("display", "block").animate(
            { top: "-="+height+"px" }, a_time,
            function() {
                $sct.eq(o_idx).css("display", "none").css("top", height+"px");
                o_idx = c_idx;
            }
        );
    }
});
</script>

간만에 작업을 했더니 감이 많이 떨어진 것 같다. 코드는 간결하게 작성한 것 같은데.. jQuery 애니메이션 작업하는 게 왠지 신선하게 느껴진다. ㅎㅎ