jQuery FadeIn , FadeOut 을 이용한 간단한 메인 배너 이미지 노출

FadeIn , FadeOut 을 이용한 간단한 이미지 노출.

하나가 사라지며 하나가 보여지는 그런... 

워낙 플러그인들이 잘 나와있지만

간단한걸 굳이 서치해서 적용하기 귀찮아서 가볍게 쓰기위해 만들었습니다.

사용법 

: 이미지에 "main_img" class를 추가.

* html

<div class="main_img"></div>
<div class="main_img" style="display:none;"></div>
<div class="main_img" style="display:none;"></div>
 
<!-- 별도 버튼등이 있는 경우...안써도 됨. -->
<ul id="main_bar">
    <li>
        <a href="Javascript:fnMain_image(0);"><img id="main_bar1" src="/images/main/bar_on.jpg" ></a>
    </li>
    <li>
        <a href="Javascript:fnMain_image(1);"><img id="main_bar2" src="/images/main/bar_off.jpg" ></a>
    </li>
    <li>
        <a href="Javascript:fnMain_image(2);"><img id="main_bar3" src="/images/main/bar_off.jpg" ></a>
    </li>
</ul>

* JS

<script type="text/javascript">
<!--
    // 메인 롤링 s
    var main_img = 0;
 
    function fnMain_image(img_num)
    {
        if (img_num == 0 || img_num)
        {
            main_img = img_num;
        }else{
            main_img = parseInt(main_img) + 1;
 
            if( main_img > $(".main_img").length -1 )
            {
                main_img = 0;
            }
        }
 
        for (i=0;i < $(".main_img").length ; i++)
        {
            $(".main_img").eq(i).fadeOut('slow');
        //  $("#main_bar > li:eq("+i+") > a > img").attr("src","/images/main/bar_off.jpg");
        }
 
        $(".main_img").eq(main_img).fadeIn('slow');
        //$("#main_bar > li:eq("+main_img+")  > a > img").attr("src","/images/main/bar_on.jpg");
    }
 
    setInterval(function(){ fnMain_image(); }, 3000);
    // 메인 롤링 e
//-->
</script>