我们在浏览网页时,会经常看到有很多图片每隔一段时间就会变一张图片,那么这种效果应该怎么来实现呢?

为简化代码,将几张图片分别命名为0.png , 1.png , 2.png 。实现方式如下:


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 
 </head>
 <body>
 <img />
 <script>
 var index = 0;
 
 /*
  * 在image标签中插入路径为path的图片
  */
 function image(path){
 return document.getElementsByTagName("img")[0].src=path;
 }
 
 /*
  * 在次数不同时设置不同的图片
  */
 function getImage(){
 index=index%3;
 image("./img/"+index+".jpg");
 index++;
 }
 
 /*
  * 播放图片,一秒钟变换一次
  */
 function change(){
 setInterval("getImage()",1000);
 }
 
 /**
  * 先调用一次,否则会有一秒钟的空白
  */
 getImage();
 
 /**
  * 调用方法
  */
 change();
 </script>
 </body>
</html>