js---幻灯片
幻灯片demo1: <!DOCTYPE html> <style> div{ position:absolute } </style> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body onload="start_timer()"> <script> var n = 1; //全局变量,记录当前图片的序号 var timer = null;//全局变量,计时器 //将图片换成第no张 function changeToN(no) { //利用图片的文件名和序号一致 //1 获得img var img = document.getElementsByTagName("img")[0]; //2 修改src属性 img.setAttribute("src","img/"+no+".jpg"); //3 给对应的div加高亮塞 resetdiv();//还原所有的颜色 var div = document.getElementById("d"+no); div.style.backgroundColor = "cadetblue"; //4 修改全局变量的当前图片序号 n = no; } //每个计时器要执行的代码 function doInTimer() { if(n<5) n++; else n = 1; changeToN(n);//调用函数,更改图片 } //启动计时器 function start_timer() { if (timer==null) timer = window.setInterval("doInTimer()",2000); } //停止计时器 function stop_timer() { window.clearInterval(timer); timer = null; } </script> <div style="left:200px; top:200px; width: 300px; height: 200px; background-color: gold;"> <img src="img/1.jpg" width="100%" height="100%" onmouseover="stop_timer()" onmouseout="start_timer()" /> </div> </body> </html>