[jQuery] 위에서 순차적으로 내려오는 이미지

위 이미지와 같이 위에서 순차적으로 내려오는 이미지를 구현하기 위한 코드이다. 개발 중인 쇼핑몰 솔루션에 적용예정인데 이런 기능을 하는 jQuery 플러그인 등이 있지만 간단하게 jQuery의 each(), animate(), delay() 를 사용하면 구현할 수 있다. 약간의 css 까지 더해지면 더할나위 없을지도 모른다. 아래는 간단한 문서구조이다.

<ul>
    <li class="first">
        <div>이미지</div>
        <div>이미지</div>
        <div>이미지</div>
    </li>
    <li>
        <div>이미지</div>
        <div>이미지</div>
        <div>이미지</div>
    </li>
</ul>

그리고 아래는 css 코드이다. 아래 코드는 개념적인 코드이므로 실제 사용엔 무리가 있다.

ul { position: relative; width: 700px; height: 300px; }
li { position: absolute; top: 0; left: 0; display: none; }
li.first { display: block; }
div { float: left; position: relative; top: -300px; margin-left: 20px; }

이제 애니메이션을 실행하는 jQuery 코드를 작성해 보자.

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

    interval = setInterval(image_drop, time);
});

function image_drop()
{
    var delay = 0;
    $ct.eq(o_idx).css("display", "none");
    $ct.eq(o_idx).find("div").css("top", "-"+height+"px");

    c_idx = (o_idx + 1) % count;

    $ct.eq(c_idx).css("display", "block");
    $ct.eq(c_idx).find("div").each(function() {
        $(this).delay(delay).animate(
            { top: "+="+height+"px" }, a_time
        );
        delay += a_delay;
    });

    o_idx = c_idx;
}
<script>

위의 코드가 실행되면 6초마다 상품의 리스트가 바뀌고 리스트 각각의 상품은 0.3초의 차이를 두고 위에서 내려오기 시작한다.