图片轮换特别快
<!DOCTYPE html>
<html>
<head>
<title>轮播</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="main" id="main">
<div class="banner" id="banner">
<a href="#">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="#">
<div class="banner-slide slide2"></div>
</a>
<a href="#">
<div class="banner-slide slide3"></div>
</a>
</div>
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<div class="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
function byid(id){
return typeof (id) === "string"?document.getElementById(id):id;
}
var index=0,timer=null,pics=byid("banner").getElementsByTagName("div"),len=pics.length;
function slideImg(){
var main=byid("main");
main.onmouseover=function(){
//划过清楚计时器
}
main.onmouseout=function(){
timer=setInterval(function(){
index++;
if(index>=len){
index=0;
}
changeImg();
},3000)
}
}
//切换图片
function changeImg(){
//遍历banner下的div 将其隐藏
for(var i=0;i<len;i++){
pics[i].style.display="none";
}
pics[index].style.display="block";
}
slideImg();
正在回答
同学你好，这里测试贴出代码，在第一次划过图片时，图片轮换是正常的速度，在第二次、第三次划过时，会越来越快。
当鼠标滑过图片，触发onmouseout，执行了timer=setInterval()方法，开始图片轮换，当第二次鼠标放在图片上时，并没有清除timer(计时器)，导致每次触发onmouseout事件，会在原有的基础上继续触发执行setInterval()方法，所以会越来越快。
解决办法，在鼠标指针移动到图像上时-->onmouseover事件中清除计时器，例如：
在鼠标悬停在图片上时，清除这个计时器，就能解决这个问题啦。
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星