티스토리에 블로그에 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>