- 步骤分析
分析：
1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。
图片如下：
banner_1.jpg
banner_2.jpg
banner_3.jpg
- 步骤实现
第一步：在页面上使用img标签展示图片
<img id="img" src="img/banner_1.jpg" width="100%">
第二步：定义一个方法，修改img的src属性
// 修改图片src属性
var number = 1;
function fun(){
number ++ ;
// 判断number是否大于3
if(number > 3){
number = 1;
}
// 获取img对象
var img = document.getElementById("img");
img.src = "img/banner_"+number+".jpg";
}
第三步：定义一个定时器，每隔3秒钟调用这个方法一次
// 定义定时器
setInterval(fun,3000);
- 所有步骤的代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <img id="img" src="img/banner_1.jpg" width="100%"> <script> // 修改图片src属性 var number = 1; function fun(){ number ++ ; // 判断number是否大于3 if(number > 3){ number = 1; } // 获取img对象 var img = document.getElementById("img"); img.src = "img/banner_"+number+".jpg"; } // 2.定义定时器 setInterval(fun,3000); </script> </body> </html>