I love motion on web pages so I decided to code this for you. I hope it will help you further.

<html>
	<head>
		<title>test</title>
		<script type="text/javascript">
			var divs;
			var currentDiv  = 0;
			var slideDelay = 2000;
			function show() {
				var slider = document.getElementById('slider');
				divs = slider.getElementsByTagName('div');
				
				startSliding();
			}
			
			function startSliding() {
				var i
				for(i =0; i < divs.length; i = i + 1) {
					if(currentDiv >= divs.length) {
						currentDiv = 0;
					}
					if(i == currentDiv) {
						divs[i].style.visibility = "visible";
					} else {
						divs[i].style.visibility = "hidden";
					}
				}
				currentDiv = currentDiv + 1;
				setTimeout("startSliding()", slideDelay);
			}
		</script>
		
		<style>
			#slider {
				position: absolute;
				top: 20px;
				left: 20px;
				width: 300px;
				height: 300px;
				border: 1px solid red;
			}
			
			.page {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				border: 1px solid black;
				
			}
			
			#page1 { background-color: red;}
			#page2 { background-color: blue;}
			#page3 { background-color: green;}
			#page4 { background-color: yellow;}
		</style>		
	</head>
	<body onload="show();">
	
		
		<div id="slider">
			<div class="page" id="page1">div 1</div>
			<div class="page" id="page2">div 2</div>
			<div class="page" id="page3">div 3</div>
			<div class="page" id="page4">div 4</div>
		</div>
		
	</body>
</html>
This article has been dead for over six months. Start a new discussion instead.