                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /焦點(diǎn)圖輪播特效

不知道錯(cuò)哪里了，求大神指點(diǎn)，圖片會(huì)亂閃之后瀏覽器崩潰！

<!DOCTYPE?html>
<html>
	<head>
		<meta?charset="utf-8"?/>
		<title></title>
		<style>
			*{margin:0;padding:0;text-decoration:none;}
			body{padding:20px}
			#container{width:600px;height:400px;border:3px?solid?#333;overflow:hidden;position:relative;margin:0?auto;}
			#list{width:4200px;height:400px;position:absolute;z-index:1;}
			#list?img{float:left;}
			#buttons{position:absolute;width:100px;height:10px;bottom:20px;left:250px;z-index:2;}
			#buttons?span{cursor:pointer;display:block;float:left;width:10px;height:10px;border:1px?solid?#FFF;border-radius:50%;background:#333;margin-right:5px;}
			#buttons?.on?{??background:?orange;}
			.arrow{position:absolute;display:none;width:40px;height:40px;line-height:40px;z-index:2;font-size:36px;text-align:center;font-weight:bold;top:180px;background-color:rgba(0,0,0,.3);color:#FFF;}
			
			#prev{left:20px;}
			#next{right:20px;}
			#container:hover?.arrow{display:block;}
			.arrow:hover{background-color:rgba(0,0,0,.7);}
			
		</style>
		<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?index=1;
				
				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??animate(offset){
					var?newLeft=parseInt(list.style.left)+offset;
					var?time?=?300;
					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';
							setInterval(go,interval);
						}else{
							list.style.left=newLeft+'px';
							if(newLeft<-3000){
								list.style.left?=?-600+'px';
							}
							if(newLeft>-600){
								list.style.left?=?-3000+'px';
							}
						}
					}
					go();
					
					
				}
				
				next.onclick=?function(){
					if(index==5){
						index=1;
					}else{
						index+=1;
					}
					showButton();
					animate(-600);	
				}
				prev.onclick=function(){
					if(index==1){
						index=5;
					}else{
						index-=1;
					}
					showButton();
					animate(600);	
				}
				
				for(var?i=0;i<buttons.length;i++){
					buttons[i].onclick=function(){
						if(this.className=='on'){
							return;
						}
						var?myindex=parseInt(this.getAttribute('index'));
						var?om=-600*(myindex-index);
						animate(om);
						index=myindex;
						showButton();
						
					}
				}
				
				
				
		}	
		</script>
	</head>
	<body>
		<div?id="container">
			<div?id="list"?style="left:-600px">
				<img?src="img/5.jpg"?alt=""?title="">
				<img?src="img/1.jpg"?alt=""?title="">
				<img?src="img/2.jpg"?alt=""?title="">
				<img?src="img/3.jpg"?alt=""?title="">
				<img?src="img/4.jpg"?alt=""?title="">
				<img?src="img/5.jpg"?alt=""?title="">
				<img?src="img/1.jpg"?alt=""?title="">
			</div>
			<div?id="buttons">
				<span?index="1"?class="on"></span>
				<span?index="2"?class=""></span>
				<span?index="3"?class=""></span>
				<span?index="4"?class=""></span>
				<span?index="5"?class=""></span>	
			</div>
			<a?href="#"?id="prev"?class="arrow"><</a>
			<a?href="#"?id="next"?class="arrow">></a>
		</div>
	</body>
</html>