JS輪播圖實現

今天終於把代碼整理下來了，代碼基本上不用改，只需修改圖片路徑和相關寬度

CSS部分：

	<style type="text/css">
#container{width:800px; height:400px; margin-left:200px; border:1px solid #333; overflow:hidden; position:relative;}
#list{ width:5700px; height:400px; position:absolute; z-index:1;}
#list img{float:left;}
#buttons {position:absolute; height:10px; width:100px; z-index:2; bottom:20px; left:400px;}
#buttons span{cursor:pointer; float:left; border:1px solid #fff ; width:10px ; height:10px;border-radius: 50px; background:#333; margin-right:5px}
#buttons .on{background:#FF6600;}
.arrow{cursor:pointer; display:none; line-height:39px; text-align:center; font-size:36px; font-weight:bold; width:40px; height:40px; position:absolute; z-index:2;top:180px; background-color:RGBA(0,0,0,.3); color:#fff}
.arrow:hover{ background-color:RGBA(0,0,0,.7);}
#container:hover .arrow{display:block;}
#prev{left:20px;}
#next{right:20px;}

	</style>

JS部分：

<script>
		window.onload = function(){
		var container = document.getElementById('container');
		var list = document.getElementById('list');
		var buttons = document.getElementById('buttons').getElementsByTagName('span');
		var prev = document.getElementById('prev');
		var next = document.getElementById('next');
		var img = document.getElementById('img');
		var index = 1;
		var animated = false;
		var timer;
		
		function showButton(){
			for(var i = 0;i < buttons.length;i++){
				if(buttons[i].className == 'on')
				{
					buttons[i].className = '';
					break;
				}
			}
			buttons[index-1].className = 'on';
		}
		
		function play(){
			timer = setInterval(function(){next.onclick();},4000);
		}
		function stop(){
			clearInterval(timer);
		}
		
		function animate(offset){
			animated = true;
			var newLeft = parseInt(list.style.left) + offset;
			var time = 800;
			var interval = 10;
			var speed = offset/(time/interval);
			
			function go(){
				if((speed > 0 && parseInt(list.style.left) < newLeft) || (speed < 0 && parseInt(list.style.left) > newLeft))
				{
					list.style.left = parseInt(list.style.left) + speed + 'px';
					setTimeout(go,interval);
				}
				else
				{
					animated = false;
					list.style.left = newLeft  + 'px';
					if(newLeft > -800){
						list.style.left = -4000 + 'px';
					}if(newLeft < -4000){
						list.style.left = -800 + 'px';
					}
				
				}
			}
			go();
			
			
		}
		
		
		next.onclick = function(){
			if(index == 5){
				index = 1;
			}else{
				index += 1;
			}
			showButton();
			if(!animated)
			animate(-800);
		};
		prev.onclick = function(){
			if(index == 1){
			index = 5;
			}else{
			index -= 1;
			}
			showButton();
			if(!animated)
			animate(800);
		};
		
		container.onmouseover = stop;
		container.onmouseout = play;
		
		play();
		
	};
	
	
	</script>

HTML部分：

<div id="container">
	<div id="list" style="left:-800px" >
		<img src="e.jpg" alt="" />
		<img src="a.jpg" alt="" />
		<img src="b.jpg" alt="" />
		<img src="c.jpg" alt="" />
		<img src="d.jpg" alt="" />
		<img src="e.jpg" alt="" />
		<img src="a.jpg" alt="" />
	</div>

	<div id="buttons">
		<span index="1" class="on" ></span>
		<span index="2"></span>
		<span index="3"></span>
		<span index="4"></span>
		<span index="5"></span>
	</div>
	<a href="javascript:;" class="arrow" id="prev" > <</a>
	<a href="javascript:;" class="arrow" id="next" > ></a>
	</div>

其實代碼量不大，大夥可以參考參考~