使用定时器,换个图片地址。
从1到5换,如果大于5了再跳到1,点击停止时关闭定时器。
<!-- Author: XiaoWen Create a file: 2016-12-08 13:19:25 Last modified: 2016-12-08 13:39:27 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动小轮播</title> <style> ul,li{ margin:0; padding:0; list-style:none; } ul,li,img{ width: 300px; height: 200px; line-height:200px; overflow: hidden; background:#ccc; text-align:center; } </style> </head> <body> <input type="button" value="轮播"> <input type="button" value="停止"> <ul> <li><img src="" alt="1.jpg"></li> </ul> <script> var a_ipt=document.getElementsByTagName("input"); var img=document.getElementsByTagName("img")[0]; var tim; //定时器 var i=1; //图片名 a_ipt[0].onclick=function(){ tim=setInterval(function(){ img.alt=i+1+".jpg"; //当然是从下一张开始播 i++; if(i%5==0){ //超过5张从第一张开始 i=0; } },100) } a_ipt[1].onclick=function(){ clearInterval(tim); } </script> </body> </html>