새로고침할 때마다 이미지 바뀌는 것을 해보았다.

background-image 스타일 이미지로 변경하기

var banner = new Array();
banner[banner.length] = 'bg01.jpg';
banner[banner.length] = 'bg02.jpg';
banner[banner.length] = 'bg03.jpg';

var obj = document.getElementById('backGround');
var size = Math.floor(Math.random()*(mainBg.length));
j = (isNaN(size)) ? 0 : size;
obj.style.backgroundImage = 'url('+ banner[size] + ')';

backGround id값에 Math.random()을 이용하여 이미지 갯수만큼 섞으라는 것이다.
자바스크립트의 DOMobj.style.backgroundImage을 이용하여 스타일을 적용한 것이다.
적용된 샘플 페이지 보기

img 태그 변경하기

var banner = new Array();
banner[banner.length] = 'image01.jpg';
banner[banner.length] = 'image02.jpg';

var banElem = document.getElementById('banner');
var size = Math.floor(Math.random()*(banner.length));
size = (isNaN(size)) ? 0 : size;
banElem.setAttribute('src', banner[size]);

위에서 스타일을 바꿨지만 img태그에서 랜덤으로 노출하고 싶을 때가 있을 것이다.
코드가 비슷하지만 몇가지 수정해야한다.
우선 img태그에 id값을 입력해줘야한다.
<img id="banner" /> 이런식으로 들어가는 것이다.
javascript에서는 setAttribute을 이용하셔 속성값을 변경해준다.
이 속성 값을 변경하게 된다면 이미지에 링크도 수정할 수 있다.
적용된 샘플 페이지 보기

<a> 주소 및 alt값도 같이 변경하기

<a>태그도 동시에 변경 되며, <img />태그에 alt값도 변경하는 방법이다.
이 방법을 하려면 2차 배열을 이용해야한다.
자바스크립트의 소스는 아래와 같다.

var banner = new Array();
banner[banner.length] = [
	'http://www.google.com',
	'image01.jpg',
	'구글'
];
  banner[banner.length] = [
    'http://www.naver.com',
    'image02.pg',
    '네이버'
  ];
  banner[banner.length] = [
	'http://www.daum.com',
	'image03.pg',
	'다음'
];

var banElem = document.getElementById('banner');
var size = Math.floor(Math.random()*(banner.length));
size = (isNaN(size)) ? 0 : size;
banElem.setAttribute('src',banner[size][1]);
banElem.setAttribute('alt', banner[size][2]);
banElem.parentElement.setAttribute('href', banner[size][0]);

위에 이미지 변경만 하는 거처럼 setAttribute을 이용했다.
적용된 샘플 페이지 보기