<style type="text/css">
*{ margin:0px auto;
   padding:0px;
   }
#wai{ width:1000px; 
      height:500px;
	  }
</style>

　　

<body>
   <div id="wai">
   <img class="tu" src="1.jpg"  width="1000" height="500"/>
   <img class="tu" src="2.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="3.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="4.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="5.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="6.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="7.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="8.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="9.jpg"  width="1000" height="500" style="display:none"/>
   </div>


</body>

　　

</body>
<script type="text/javascript">
var index = 0;
var tu = document.getElementsByClassName("tu");
huan();

function huan(){
	    
			for( var i=0;i<tu.length;i++){
				 tu[i].style.display="none";
				}
				tu[index].style.display="block";
			
		 if(index >= tu.length-1)
		    {index=0;
	      }else{
			  index++;
			  }
			  
		window.setTimeout("huan()",2000);	  
	}
	
	
	
	


</script>