Fade 효과를 이용해서 이미가 예쁘게 효과적으로 바뀌는 코드..

음..서서히 사라졌다가 서서히 나시 나오는...

음..간단하지만 왠지 많이 쓰이는 코드.ㅋ

다음에 또 만들라면 귀찮으니깐 저장 저장.ㅋ

스타일

#rolling_img { position: relative; width: 320; height: 416px; }
#rolling_img img { position: absolute; top:0; left:0; }

스크립트

jQuery(function() {
    var rolling_time = 4000;
    var effect_time = 2000;

    var $rolling_img = $("#rolling_img > img");
    $rolling_img.not(":first").hide();

    setInterval(rolling, rolling_time);

    function rolling()
    {
        $visible_img = $rolling_img.filter(":visible");
        $visible_img.fadeOut(effect_time);

        $next_img = $visible_img.next();
        if ($next_img.length === 0) {
            $next_img = $rolling_img.filter(":first");
        }
        $next_img.fadeIn(effect_time);
    }
});

화면 영역

<-li id="rolling_img">        
        <-img src="main_pic01.jpg">
        <-img src="main_pic02.jpg">
        <-img src="main_pic03.jpg">