为什么越播越快
main.onmouseout=function(){
timer=setInterval(function(){
index++;
if (index>=len) {
index=0;
}
changeImg();
},3000)
}
function changeImg(){
//console.log(index);
//pics[index].className=slide-active;
for (var i = 0; i < len; i++) {
pics[i].style.display="none";
}
pics[index].style.display="block";
}为什么鼠标滑过移出后之后再移出会越播越快。。咋办
26
收起
正在回答
5回答
每次移入移出，没有清除定时器，它就会累加的。多个计时器一块作用，设置的时间就会发生交叉，速度就越来越快了
大脸猫大脸猫喵喵喵
2017-11-09 18:22:11
HTML:
<!DOCTYPE html>
<html>
<head>
<title>图片轮播</title>
<meta charset="utf-8">
<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"></a>
<a href="javascript:void(0)" class="button next"></a>
<!--圆点导航-->
<div class="dots">
<span class="active"></span><!--active表示当前圆点-->
<span></span>
<span></span>
</div>
<script type="text/javascript" src="js/js.js"></script>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
body{
font-family: "微软雅黑";
color: #14191e;
}
.main{
width: 1200px;
height: 460px;
margin: 30px auto;
overflow: hidden;
position: relative;
}
.banner{
width: 1200px;
height: 460px;
position: relative;
}
.banner-slide{
width: 1200px;
height: 460px;
background-repeat: no-repeat;
position: absolute;
display: none;
}
.slide1{
background-image: url("../img/bg1.jpg");
}
.slide2{
background-image: url("../img/bg2.jpg");
}
.slide3{
background-image: url("../img/bg3.jpg");
}
.slide-active{
display: block;
}
.button{
position: absolute;
width: 40px;
height: 80px;
left: 244px;
top: 50%;
margin-top: -40px;
background: url("../img/n.png") no-repeat center center;
}
.button:hover{
background-color: #333;
}
.prev{
transform: rotate(90deg);
}
.next{
left: auto;
right: 0;
/*transform: rotate(270deg);*/
}
.dots{
position: absolute;
right: 20px;
bottom: 24px;
text-align: right;
}
.dots span{
display: inline-block;/*行内元素转为块元素，不然没办法设宽高*/
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 50%;
background: rgba(7,17,27,0.4);
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
margin-left: 8px;
cursor: pointer;
}
.dots span.active{
background: #fff;
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
}
JS:
//封装一个代替document.getElementById()的方法，以免获取元素时一直写太麻烦，之后直接调用即可
function byId(id){//要有形参
return typeof(id)==="string"?document.getElementById(id):id;
}
var index=0,
timer,
pics=byId("banner").getElementsByTagName("div"),
len=pics.length;
function slideImg(){
var main=byId("main");
main.onmouseover=function(){
/*setTimeout(
clearTimeout(timer)
);*/
}
main.onmouseout=function(){
timer=setInterval(function(){
index++;
if (index>=len) {
index=0;//轮流
}
changeImg();
},3000)
//clearInterval(timer);
}
}
//切换图片
function changeImg(){
//console.log(index);
//pics[index].className=slide-active;
for (var i = 0; i < len; i++) {
pics[i].style.display="none";
}
pics[index].style.display="block";
}
slideImg();相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星