效果展示
每隔2s自動換圖
實現代碼
純html+js
<html>
<head> <title>hello</title>
<script type="text/javaScript">
//圖片的序號，初始爲0
var i=0;
//設置圖片集合
var imgsurl=new Array();
//添加圖片名稱信息
imgsurl[0]="tt1.jpg";
imgsurl[1]="tt2.jpg";
imgsurl[2]="tt3.jpg";
imgsurl[3]="tt4.jpg";
//更改圖片函數
function changePicture(){
setInterval("changeimg()",2000);
}
//換圖函數
function changeimg(){
//更改img的src屬性
document.getElementById("img1").src=imgsurl[i];
//序號+1
i++;
//如果序號=4，循環變爲0
if(i==4){
i=0;
}
}
</script>
</head>
<body onload="changePicture()">
<img id="img1"></img>
</body>
</html>總結
自動換圖利用js的setInterval方法來設置休眠時間