미리보기

페이지를 새로고침 하면서 랜덤으로 바뀌는 배너 이미지를 확인하세요.

css

/* 배너가 노출될 곳에 삽입 */
<script type="text/javascript">document.write(banner[random_banner]);</script>

script

// 랜덤 배너 출력
  var banner=new Array();
  banner[0]="<a href='#'><img src='/images/study/javascript/random_banner/banner1.jpg' alt='배너1' /></a>";
  banner[1]="<a href='#'><img src='/images/study/javascript/random_banner/banner2.jpg' alt='배너2' /></a>";
  banner[2]="<a href='#'><img src='/images/study/javascript/random_banner/banner3.jpg' alt='배너3' /></a>";
  banner[3]="<a href='#'><img src='/images/study/javascript/random_banner/banner4.jpg' alt='배너4' /></a>";
  banner[4]="<a href='#'><img src='/images/study/javascript/random_banner/banner5.jpg' alt='배너5' /></a>";

var random_banner=Math.floor(Math.random()*(banner.length));

배너를 추가하실 때는
banner[4]="<a href='#'><img src='/images/study/javascript/random_banner/banner5.jpg' alt='배너5' /></a>";
위 코드 수치를 변경하면서 추가하시면 됩니다.
이미지 뿐만 아니라 텍스트도 가능하며, 스타일을 따로 주셔도 됩니다.