<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>轮播图</title> <link href="slide.css" type="text/css" rel="stylesheet"> <script src="slide.js"></script></head><body><div class="main" id="main"> <div class="banner" id="banner"> <a href="#"> <div class="slide slide1 active"></div> </a> <a href="#"> <div class="slide slide2 "></div> </a> <a href="#"> <div class="slide slide3 "></div> </a> <a href="#"> <div class="slide slide4 "> </div> </a> <a href="#"> <div class="slide slide5 "></div> </a> </div> <div class="dots" id="dots"> <span class="on"></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="arrow" id="prev"></div> <div class="arrow" id="next"></div></div><div style="background-color: black;width: 222px;height: 222px;"></div></body></html>————————————————JS部分————————————————————————————window.onload=function() { var pics = document.getElementById("banner").getElementsByTagName("div"); var dots=document.getElementById("dots").getElementsByTagName("span"); var prev=document.getElementById("prev"); var next=document.getElementById("next"); var index=0; var timer=null; var len=pics.length; function slideImg(){ var main=document.getElementById("main"); main.onmouseover=function(){ if(timer) clearInterval(timer); }; main.onmouseout=function(){ timer=setInterval(function(){ index++; if(index>=len){ index=0 } changImg(); },3000) }; main.onmouseout(); for(var d=0;d<len;d++){ dots[d].id=d; dots[d].onclick=function(){ index=this.id; changImg() } } } prev.onclick=function(){ index--; if(index<0){ index=len-1; } changImg() }; next.onclick=function(){ index++; if(index>=len){ index=0; } changImg() }; function changImg(){ for(var i=0;i<len;i++){ pics[i].style.display="none"; dots[i].className="" } pics[index].style.display="block"; dots[index].className="on"; } slideImg();};——————————————————————————————————————————————为什么我在刚进入页面的时候快速点击 next prev两个按钮进行图片切换鼠标再放到banner上 main.onmouseover=function(){ if(timer) clearInterval(timer); };轮播图也不停止了还继续播呢，应该怎么改进呢
1 回答
已采纳
慕勒0069038
TA贡献143条经验 获得超39个赞
你看下id是main的节点位置（高度，宽度啥的），我怀疑你的这个元素高度为0 ，因为没有css 具体我也不知道，js看起来没问题。动画的话建议使用jquery动画 ，可以使用stop方法 ，可以参考下 。 还有其他问题是，哪怕点了上一张 或者下一张， 你的定时器还是3s移动一次， 没有任何影响 ,例如 0s开始，2.9s 点了上一张， 3S的时候由于定时器， 自动触发下一张。，。
添加回答
举报
0/150
提交
取消