setinterval 与clearinterval问题
这是一个跑马灯程序 我把它用函数封装了下 但是有个问题 它往左和往上滚动的时候 鼠标指向它可以让它停止。但是往右和往下的时候却不能.求教各位高手这是怎么回事?
<html>
<head>
<title> 左右滚动的图片效果 - 51windows.Net </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
</head>
<body bgcolor= "#999999 ">
<table border= "1 " width= "760 " align= "center ">
<tr>
<td width= "215 "> </td>
<td width= "545 ">
<!-- 滚动代码 begin -->
<div id= "demo " style= "overflow:hidden;height:120px;width:543px; ">
<table width= "100% " cellspacing= "0 ">
<tr>
<td id= "demo1 ">
<table cellspacing= "0 " cellspacing= "2 ">
<tr>
<td> <a href= "http://www.51windows.net/mypic/sight/page_01.htm " target= "_blank "> <img src= "http://www.51windows.net/51wfolder_1/jsimg/TN_Feng016.JPG " border= "0 "/> </a> </td>
<td> <a href= "http://www.51windows.net/mypic/sight/page_01.htm " target= "_blank "> <img src= "http://www.51windows.net/51wfolder_1/jsimg/TN_Feng017.JPG " border= "0 "/> </a> </td>
<td> <a href= "http://www.51windows.net/mypic/sight/page_01.htm " target= "_blank "> <img src= "http://www.51windows.net/51wfolder_1/jsimg/TN_Feng018.JPG " border= "0 "/> </a> </td>
<td> <a href= "http://www.51windows.net/mypic/sight/page_01.htm " target= "_blank "> <img src= "http://www.51windows.net/51wfolder_1/jsimg/TN_Feng019.JPG " border= "0 "/> </a> </td>
<td> <a href= "http://www.51windows.net/mypic/sight/page_01.htm " target= "_blank "> <img src= "http://www.51windows.net/51wfolder_1/jsimg/TN_Feng020.JPG " border= "0 "/> </a> </td>
<td> <a href= "http://www.51windows.net/mypic/sight/page_01.htm " target= "_blank "> <img src= "http://www.51windows.net/51wfolder_1/jsimg/TN_Feng021.JPG " border= "0 "/> </a> </td>
</tr>
</table>
</td>
<td id= "demo2 "> </td>
</tr>
</table>
</div>
<!-- 滚动代码 end -->
</td>
</tr>
</table>
<script language= "JavaScript " src= "ff.js "/>
</script>
<script type= "text/javascript ">
scroll1( 'LEFT ', 'demo ', 'demo1 ', 'demo2 ')
</script>
</body>
</html>
-------------------
ff.js
var d1;
var d2;
var d3;
var d
var v1Scroll
var speed=50
demo2.innerHTML=demo1.innerHTML
demo1.onmouseover=function(){clearInterval(v1Scroll)}
demo1.onmouseout=function(){v1Scroll=setInterval(function(){Marquee(d,d1,d2,d3)},speed)}
function scroll1(direct,demo,demo1,demo2){
d=direct;
d1=demo;
d2=demo1;
d3=demo2;
v1Scroll=setInterval(function(){Marquee(d,d1,d2,d3)},speed);
}
function Marquee(direct,MainId,contentId,copyId){
var objMain = document.getElementById(MainId);
var objContent = document.getElementById(contentId);
var objCopy = document.getElementById(copyId);
var mainWidth = objMain.offsetWidth;
var contentWidth = objContent.offsetWidth;
var copyWidth = objCopy.offsetWidth;
var mainHeight = objMain.offsetHeight;
var contentHeight = objContent.offsetHeight;
var copyHeight = objCopy.offsetHeight;
if (direct== "LEFT "){
if (copyWidth-objMain.scrollLeft <=0){
objMain.scrollLeft-=contentWidth;
}else{
objMain.scrollLeft+=2;
}
}else if (direct== "RIGHT "){
if (copyWidth-mainWidth-objMain.scrollLeft> =0){
objMain.scrollLeft=contentWidth + copyWidth - mainWidth;
}else{
objMain.scrollLeft-=2;
}
}else if (direct== "UP "){
if (copyHeight-objMain.scrollTop <=0){
objMain.scrollTop-=contentHeight;
}else{
objMain.scrollTop+=2;
}
}else if (direct== "DOWN "){
if (copyHeight-mainHeight-objMain.scrollTop> =0){
objMain.scrollTop=contentHeight + copyHeight - mainHeight;
}else{
objMain.scrollTop-=2;
}
}
}
[解决办法]
左右效果都是一样的~~向左移动一开始是显示demo1,向右移动一开始是显示demo2,等过一段时间demo1出来了也就能停了~~~
=.=
只不过你只给demo1加了鼠标事件~而忘了给demo2加了~~~
