[jQuery] 위로 롤링되는 이미지

어제 작성했던 [JQuery] 위로 롤링되는 코드 를 약간 수정한 것이다. 스크립트 코드를 jQuery Plugin 형식으로 변경한 것이다. $.fn 으로 시작되는 코드를 봤을 때 ‘저건 뭔가?’ 이렇게 생각을 했는데 막상 사용해보니까 상당히 직관적이고 편한 방법이라는 생각이 들기 시작했다. 앞으로는 이런 식으로 작업을 해야겠다는 생각도 들었는데.. 어찌보면 class와 비슷한 개념이라 생소했는데 사용해보니까 모른척 넘어가야할 대상은 아닌 것 같다는 생각이 들었다. 아래는 수정된 코드이다.

<script>
$.fn.topRolling = function(option)
{
    var $sct = this.find("li");
    var height = this.height();
    var count = $sct.size();
    var interval = null;

    // 기본 설정값
    var settings = $.extend({
        interval: 5000,
        duration: 800
    }, option);

    if(count < 2)
        return;

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

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

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

    function top_rolling() {
        $sct.each(function(index) {
            if($(this).is(":visible")) {
                o_idx = index;
                return false;
            }
        });

        $sct.eq(o_idx).animate(
            { top: "-="+height+"px" }, settings.duration,
            function() {
                $(this).css("display", "none").css("top", height+"px");
            }
        );

        c_idx = (o_idx + 1) % count;

        $sct.eq(c_idx).css("display", "block").animate(
            { top: "-="+height+"px" }, settings.duration,
            function() {                
                o_idx = c_idx;
            }
        );
    }
}

$(function() {
    $("ul").topRolling();
    // 설정값을 변경하려면 아래처럼 사용
    //$(ul).topRolling({ interval: 5000, duration: 800 });
});
</script>

실행은 위 코드의 마지막 부분에 $(“ul”).topRolling(); 처럼 입력해 주면 된다. jQuery 플러그인 만드는 것이 어렵다고 생각했는데 위와 같은 방법으로 하면 간단한 플러그인은 만들 수 있겠다는 생각이 든다. 근데 어떤 플러그인을 만들어야 할지는.. 아직 모르겠다.

참고글 : http://learn.jquery.com/plugins/basic-plugin-creation/