利用數組實現幾張圖片循環顯示
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>
浙公網安備 33010602011771號