I'm trying to make a function that will change the classes of four images every 10 sec so that they rotate from foreground to background. I've tested the code with Firebug and it does not produce any errors. I've also placed a console.log inside of the loop so that I can confirm that the classes are being changed correctly. However, it simply does not seem to work. I think the problem might be in the JS where I concatenate "position" + i, but I'm not sure.

Here's all the relevant code:


HTML Code:
<body>
	<div id="page">

	<div class="container">
			<img src="images/one.jpg" class="position0" alt="" />
	
			<img src="images/two.jpg" class="position1" alt="" />
		
			<img src="images/three.jpg" class="position2" alt="" />
	
			<img src="images/four.jpg" alt="" class="position3" />
		
		</div>
	
	
	</div> <!-- page -->
	<script type="text/javascript" src="javascript/image-slider-test.js"></script>
	</body>
Code:
body {
	font-size: 100%;
	background: #242929;
}

#page {
	position: relative;
	width: 900px;
	margin: 100px auto 100px;
	height: 500px;
}

.container {
	position: relative;
	width: 363px;
	height: 256px;
}

.position0 {
	position: absolute;
	z-index: 4;
}

.position1 {
	width: 90%;
	height: 90%;
	opacity: .75;
	position: absolute;
	right: -12px;
	top: 5%;
	z-index: 3;
}

.position2 {
	width: 80%;
	height: 80%;
	opacity: .5;
	position: absolute;
	right: -24px;
	top: 10%;
	z-index: 2;
}

.position3 {
	width: 70%;
	height: 70%;
	opacity: .25;
	position: absolute;
	right: -36px;
	top: 15%;
	z-index: 1;
}
Code:
var change = function() {
	var images = document.getElementsByTagName("img");
	
	for(i = 0; i < images.length; i++) {
		images[i].className = "position" + i;
		console.log(images[i].className);
	}

};

// call change() every 10 sec
setInterval(change, 10000);
Thanks for helping!