利用数组实现几张图片循环显示
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>
