티스토리에 블로그에 jQuery를 이용한 롤링배너 설치

지난 주부터 블로그에 기존 애드센스 광고를 하나를 빼고 내가 몸담고 있는 회사의 배너 광고를 운영 중이다.

이런 거 해야 하나 싶어서 회사 광고 배너는 설치를 안했는데.. 명목상 대표니까 뭐 그런 거 따질 때가 아니다. ^^;

배너의 롤링 기능을 구현한 것이 전부인데 코드도 정말 심플하게 작성을 했다. 너무 화려하면 좋지 않는 영향을

미칠 수도 있지 않을까 하는 노파심에.. 근데 뭐 오히려 요즘은 심플한게 더 좋은 게 아닌가 하는 생각이 든다.

우선 롤링 기능을 위해서는 jQuery를 로드해야 하는데.. 이건 티스토리 스킨 관리 기능에서 jQuery 라이브러리

파일을 업로드 하고 스킨에서 로드만 해주면 된다. 그 코드는 아래와 같다.

<script type=”text/javascript” src=”./images/jquery-1.7.2.min.js”></script>

그리고 아래는 실제 배너를 3초마다 바꿔서 보여주는 자바스크립트 코드이다. 

<script type=”text/javascript”>

var adbanner_crt = adbanner_old = 0;

var banner_interval;

$(function() {

    $(‘.adbanner div li:first’).css(“display”, “block”);

    banner_interval = setInterval(“RotateBanner()”, 3000);

    $(‘.adbanner div li’).hover(

        function() {

        if(banner_interval) {

            clearInterval(banner_interval);

        }

        },

        function() {

            if(banner_interval) {

                clearInterval(banner_interval);

            }

            banner_interval = setInterval(“RotateBanner()”, 3000);

        }

    );

});

function RotateBanner()

{

    // 배너의 개수가 3이므로 3을 나눈 나머지를 취한다.

    adbanner_crt = (adbanner_old + 1) % 3;

    $(‘.adbanner div li:eq(‘ + adbanner_old + ‘)’).css(“display”, “none”);

    $(‘.adbanner div li:eq(‘ + adbanner_crt + ‘)’).css(“display”, “block”);

    adbanner_old = adbanner_crt;

}

</script>