轮播图的实现主要是BOM中window窗口对象里面的与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数:
1. js代码或者方法对象
2. 毫秒值
* 返回值:唯一标识,用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
步骤
0.准备几张图片
1.在页面上使用img标签展示图片
2.定义一个方法.修改图片对象的src属性,来实现更改的图片的功能
3.定义一个定时器,每隔一段时间使用一次方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="img" src="img/banner_1.jpg" width="100%"> <script> var i=1; function fun() { i++; if(i>3){ i=1; } var img = document.getElementById("img"); img.src="img/banner_"+i+".jpg"; } setInterval(fun,2000); </script> </body> </html>