利用数组实现几张图片循环显示

2015-04-12 17:40:22

利用数组实现图片循环就是将图片放在数组中，然后循环显示

以四张图片为例

<script>
  //利用数组对象实现四张图片每隔5秒换一张的效果
	var img=new Array();//创建数组对象
	var index=0;//定义数组下标
	img[0]=new Image();
	img[0].src='../../../imgs/66.ico';
	img[1]=new Image();
	img[1].src='../../../imgs/68.ico';
	img[2]=new Image();
	img[2].src='../../../imgs/70.ico';
　　　　　img[3]=new Image();
　　　　　img[3].src='../../../imgs/64.ico';


	function changePIC(){
		document.images[0].src=img[index].src;
		index++;
		if(index==4){
			index=0;
		}
	}
	setInterval('changePIC();',5000);
  </script>
 </head>
 <body>
  <img src="../../../imgs/64.ico" />
 </body>

　　我用的图是图标

　　Image():预装载图片对象

第二种方法：

<script>	
  	var t=1;
  	function changePic(){
	if(t==1){
	document.images[0].src='2.jpg';
	t=2;
	}else if(t==2){
	document.images[0].src='3.jpg';
	t=3;
	}else if(t==3){
	document.images[0].src='4.jpg';
	t=4;
	}else{
　　　　　　document.images[0].src='1.jpg';
　　　　　　t=1
　　　　　　}
  
 	 }
  	window.setInterval('changePic()',5000);
  	</script>
 	</head>
 	<body>
  	<img name='im1' src='1.jpg' />
 	</body>

第三种方法：

<script>
	var i=0;  
	var arr=new Array(); 
	arr[0]="1.jpg"; 
	arr[1]="2.jpg"; 
	arr[2]="3.jpg"; 
	arr[3]="4.jpg"; 
	setInterval('changeImg();',1000);  
	function changeImg() 
	{ 
		var obj=document.getElementById("obj"); 
		if (i==arr.length-1)  
		{ 
			i=0; 
		} 
		else 
		{ 
			i+=1; 
		} 
		obj.src=arr[i]; 
	} 
	</script> 
 	</head>
 	<body>
	<img id='obj' src ="1.jpg"> 
 	</body>