jq轮播问题
<!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);
};
轮播图也不停止了还继续播呢，应该怎么改进呢
Ximoo1回答
-
慕勒0069038
你看下id是main的节点位置（高度，宽度啥的），我怀疑你的这个元素高度为0 ，因为没有css 具体我也不知道，js看起来没问题。动画的话建议使用jquery动画 ，可以使用stop方法 ，可以参考下 。 还有其他问题是，哪怕点了上一张 或者下一张， 你的定时器还是3s移动一次， 没有任何影响 ,例如 0s开始，2.9s 点了上一张， 3S的时候由于定时器， 自动触发下一张。，。
随时随地看视频慕课网APP
JavaScript
Html/CSS
JQuery