首先先看代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div2{ width: 200px; height: 200px; background: gray; } .cla{ background: orange; } </style> <script type="text/javascript"> var arr=["yinshuo","尹","烁","大尹烁"];//定义一个循环的数组 var timer=null; //定时器 var i=0; //主要用在鼠标移入已出 function tick(){//tick函数+定时器 实现轮播效果 var odiv1=document.getElementById('div1'); var odiv2=document.getElementById('div2'); var ipts=odiv1.getElementsByTagName('input'); for(var j=0;j<ipts.length;j++){ //首先清除其他效果 ipts[j].className=''; } ipts[i].className='cla'; odiv2.innerHTML=arr[i]; i++; if(i==ipts.length){ i=0; } } window.onload=function(){ var odiv1=document.getElementById('div1'); var odiv2=document.getElementById('div2'); var ipts=odiv1.getElementsByTagName('input'); for (var i=0;i<ipts.length;i++){//实现鼠标移入移出 ipts[i].cnt=i;//看看cnt在后面哪里出现，cnt是自己定义的一个计数 ipts[i].onmouseover=function(){ clearInterval(timer); for(var j=0;j<ipts.length;j++){ ipts[j].className=''; } this.className='cla'; odiv2.innerHTML=arr[this.cnt] } ipts[i].onmouseout=function(){ timer=setInterval(tick,2000); } } clearInterval(timer);//在调用定时器前先把其关掉，保证每次只用一个定时器开着，不然实现会出问题，我会在后面给出一个代码，具体解释此效果 timer=setInterval(tick,2000); tick(); //一定要加上，不然重新刷新时会有延迟 } </script> </head> <body> <div id="div1"> <input type="button" name="btn1" id="btn1" value="按钮" class="cla"/> <input type="button" name="btn1" id="btn2" value="按钮" /> <input type="button" name="btn1" id="btn3" value="按钮" /> <input type="button" name="btn1" id="btn4" value="按钮" /> </div> <div id="div2"> </div> </body> </html>追加个代码，解释在执行一个定时器之前加上clearInterval(timer);（timer是对定时器起的名字）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #adiv{ height: 100px; width: 100px; background: red; position: absolute; } </style> <script type="text/javascript"> window.onload=function (){ var ospd=document.getElementById('spd'); var odiv=document.getElementById('adiv'); var oid=document.getElementById('aid'); var start_1=document.getElementById('start'); var clr; var speed=0; function Move(){ speed=parseInt(ospd.value); if(odiv.offsetLeft>=500){ clearInterval(clr); } else{ odiv.style.left=odiv.offsetLeft+speed+'px'; } } start_1.onclick=function (){ clearInterval(clr);//试着把这段注释取消，然后多次点击按钮，发现物体会加速； clr=setInterval(Move,30); } oid.onclick=function(){ clearInterval(clr); } } </script> </head> <body> 速度：<input type="text" name="spd" id="spd" value="" /> <input type="button" name="aid" id="aid" value="停止" /> <input type="button" name="" id="start" value="开始" /> <div id="adiv"> </div> </body> </html>谢谢 支持
