为什么添加了if (timer) { clearInterval(timer) timer=null } 这行代码幻灯片不会自动播放，鼠标移动过去才会自动播放？-慕课网

首页课程实战体系课手记专栏慕课教程

为什么添加了if (timer) { clearInterval(timer) timer=null } 这行代码幻灯片不会自动播放，鼠标移动过去才会自动播放？

来源：3-3 bug解决及定时器优化

qq_将心灬比心_03371942

2017-08-06 20:54

<!doctype html>

<html>

<head>

<title>Document</title>

<style>

*{margin:0;

padding:0;

list-style:none;}

.wrap{height:170px;

width:490px;

margin:60px auto;

overflow: hidden;

position: relative;

margin:100px auto;}

.wrap ul{position:absolute;}

.wrap ul li{height:170px;}

.wrap ol{position:absolute;

right:5px;

bottom:10px;}

.wrap ol li{height:20px; width: 20px;

background:#ccc;

border:solid 1px #666;

margin-left:5px;

color:#000;

float:left;

line-height:center;

text-align:center;

cursor:pointer;}

.wrap ol .on{background:#E97305;

color:#fff;}

</style>

window.onload=function(){

var wrap=document.getElementById('wrap'),

pic=document.getElementById('pic').getElementsByTagName('li'),

list=document.getElementById('list').getElementsByTagName('li'),

index=0,

timer=null;

// 定义并调用自动播放函数

timer=setInterval(qude,2000)

function qude(){

index++;

if (index>=list.length) {

index=0

}

common(index)

// console.logo(pic)

}

if (timer) {

clearInterval(timer)

timer=null

}

// 定义图片切换函数

for (var j = 0; j < list.length; j++) {

list[j].id=j;

list[j].onmouseover=function(){

clearInterval(timer);

common(this.id)

}

list[j].onmouseout=function(){

timer=setInterval(qude,2000)

}

};

// 鼠标划过整个容器时停止自动播放

function common(curIndex){

// console.logo(curIndex);

for (var i = 0; i < list.length; i++) {

list[i].className="";

pic[i].style.display="none"

}

list[curIndex].className="on"

pic[curIndex].style.display="block"

index=curIndex

}

// 鼠标离开整个容器时继续播放至下一张

// 遍历所有数字导航实现划过切换至对应的图片

}

</script>

</head>

<body>

</ul>

</ol>

</div>

</body>

</html>

写回答关注

1回答

RebekahNi

2017-08-08 22:51:31

你没有调用自动播放函数，如果想页面一加载完毕就自动播放，应该在window。onload（）中调用一下自动播放函数，这样试试：
function qude(){
index++;
if (index>=list.length) {
index=0
}
common(index)
}；qude()；
或者你把timer=setInterval(qude,2000)与
if (timer) {
clearInterval(timer)
timer=null
}
位置换一下，你这样设置，不就把timer定时器给null了么

0 0