SIR 메인 HOT SKIN/BUILDER 효과 순차롤링 최신글

<section id='i_hot'>
    <h2><span></span>최근 뜨는 스킨</h2>
    <ul>
        <li id='i_hot_skin'>
            <h3><span></span>스킨</h3>
            최근게시물 불러오는 자리
            <div><a href='<?=$g4['path']?>/bbs/board.php?bo_table=g4_skin'><span></span>더보기</a></div>
        </li>
        <li id='i_hot_bd'>
            <h3><span></span>빌더</h3>
            최근게시물 불러오는 자리
            <div><a href='<?=$g4['path']?>/bbs/board.php?bo_table=g4_builder'><span></span>더보기</a></div>
        </li>
    </ul>
</section>

<ol>
<?
//for 문 자리 : 기본 베이직 최근게시물 스킨을 참조해서 코드를 넣으세요.
?>
    <li>
        <a href='<?=$list[$i]['href']?>'><span class='i_hot_title'><?=$list[$i]['subject']?></span></a>
        <span class='i_senskin_author'><?=$list[$i]['tmp_name']?></span>  
        <span class='i_senskin_date'><?=$date?></span>   
    </li>
<?
//for 문 끝나는 자리
?>
</ol>

<style>
#i_hot {clear:both;position:relative;margin-bottom:5px;width:100%;height:225px;background:url('../img/index.png') #000 0 -190px;zoom:1}
#i_hot:after {display:block;visibility:hidden;clear:both;height:0;content:""}

#i_hot h2, #i_hot h3 {width:0;height:0;overflow:hidden}
#i_hot ul {position:relative}
#i_hot ul li {position:relative;float:left;padding-top:80px;padding-left:47px;width:393px}
#i_hot ul li ol {list-style:none}
#i_hot ul li ol li {display:none;float:none;padding:0;padding-top:4px;height:26px;width:auto}
#i_hot ul li ol li span {display:inline-block}
#i_hot ul li ol li .i_hot_title {margin-right:10px;width:230px;height:13px;color:#7aa6c7;vertical-align:middle;overflow:hidden}
#i_hot ul li ol li .i_hot_author {margin-right:5px;width:82px;color:#8596a2;text-align:center}
#i_hot ul li ol li .i_hot_date {width:50px;color:#8596a2;text-align:center}
#i_hot #i_hot_skin div {position:absolute;top:50px;left:130px;width:60px;height:20px}
#i_hot #i_hot_skin div span {display:block;position:absolute;top:0;left:0;width:60px;height:20px;background:url('../img/index.png') -130px -240px}

#i_hot #i_hot_bd div {position:absolute;top:50px;left:120px;width:60px;height:20px}
#i_hot #i_hot_bd div span {display:block;position:absolute;top:0;left:0;width:60px;height:20px;background:url('../img/index.png') -560px -240px}
</style>

<script>
$(document).ready(function(){
    // ///////////SENSATIONAL SKIN 롤링
    var $intervalll = 0; // 롤링 간격 설정
    for (var i=1; i<6; i++ ) {
        if (i > 1) { $intervalll = $intervalll + 1000; } // 첫 롤링은 바로 실행
        $('#i_hot ul li ol li:nth-child('+i+')').delay($intervalll).slideDown('fast');  
    }

});

</script>

이 이미지를 그대로 사용하지 않을 경우 수정해야 하는 부분

#i_hot {clear:both;position:relative;margin-bottom:5px;width:100%;height:225px;background:url('../img/index.png') #000 0 -190px;zoom:1}

#i_hot #i_hot_skin div span {display:block;position:absolute;top:0;left:0;width:60px;height:20px;background:url('../img/index.png') -130px -240px}

#i_hot #i_hot_bd div span {display:block;position:absolute;top:0;left:0;width:60px;height:20px;background:url('../img/index.png') -560px -240px}