DOM中定时器走马灯切换时遇到问题 - 黑马程序员技术交流社区

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>123456789</title>
<!-- <script type="text/javascript">
function scroll(){
var title=document.title;
var firstCh=title.charAt(0);
var leftStr=title.substring(1,title.length);
document.title=leftStr+firstCh;
}
setInterval("scroll()",500)
</script>-->
<script type="text/javascript">
// 有问题在运行时点击切换时出现问题！！！切换后依旧滚动但不是按预期的滚动
var m;
var n;
function left(){
var title=document.title;
var firstCh=title.charAt(0);
var leftStr=title.substring(1,title.length);
document.title=leftStr+firstCh;
}
function right(){
var title=document.title;
var rightCh=title.charAt(title.length-1);
var leftStr=title.substring(0,title.length-1);
document.title=rightCh+leftStr;
}
function leftScroll(){
clearInterval(n);
var m=setInterval("left()",500);
}
function rightScroll(){
clearInterval(m);
var n= setInterval("right()",500);
}
</script>
</head>
<body>
<input type="button" value="向左滚动" onclick="leftScroll()" />
<input type="button" value="向右滚动" onclick="rightScroll()" />
</body>
</html>

复制代码

1，假如向右滚动，你切换到向左滚动效果是出不来的首先你得清除他向右滚动
2，滚动的时间会叠加，在同一个方向上连续点上去你看到的效果是越来越快。。。但是真正的不是时间叠加，而是每次的滚动都是独立的例如：用5秒做一周期吧你上面500毫秒太快了。第一点击是5秒后，第二次点击不会在5/2而是移动后的一秒后点击，那出现的是两次移动出现的间隔是一秒。。。依次类推~~~~
3，你做定时器滚动时记得做清除。。。你没有做清除所以看不出效果

function leftScroll(){
stopScroll();
m=setInterval("left()",500);
}
function rightScroll(){
stopScroll();
n= setInterval("right()",500);
}
function stopScroll(){
clearInterval(n);
clearInterval(m);
}

复制代码