鼠标悬停动画停止，鼠标移出动画继续。

thjfk1 2011-09-20 02:15:54

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript广告代码_首页焦点图片切换</title>
<style type="text/css">
ul { list-style:none; margin:0px; padding:0px;}
img{ border:none;}
#gg {
width:456px;
height:160px;
overflow:hidden;
margin-top: 100px;
}
#nav li{ width:456px; height:160px; background-color:#ccc; text-align:center; line-height:160px;}
#number { width:100px;}
#number li{ float:left; margin-right:5px;cursor:hand; width:20px; height:20px; background-color:#fff; border:1px solid #000; text-align:center; line-height:20px;}
#number li.active{ background-color:#FF6600; color:#fff;}
</style>
</head>
<body style="margin:0px;"><div style="width:600px; height:600px;">
<div style="float:left; width:85px; height:20px; margin-top:0px;">
<ul id="number">
<li id="nub_1" class="active" onmouseover="show(1);">1</li>
<li id="nub_2" onmouseover="show(2);">2</li>
<li id="nub_3" onmouseover="show(3);">3</li>
</ul>
</div>
<div id="gg">
<ul id="nav">
<li id="con1" style="display:block"><a href="#">图一</a></li>
<li id="con2"><a href="#">图二</a></li>
<li id="con3"><a href="#">图三</a></li>
</ul>
</div>
<script>
var num = 1;
function show(id) {
window.clearInterval(timer);
num = id;
loop();
timer = window.setInterval("loop()",1500);
}
function loop() {
for (var i = 1; i <= 3 ;i++ ) {
if (i == num){
document.getElementById("con" + i).style.display="block";
document.getElementById("nub_" + i).className = "active";
}
else {
document.getElementById("con" + i).style.display="none";
document.getElementById("nub_" + i).className = "";
}
}
num = num + 1;
if (num > 3){
num = 1;
}
}
var timer = window.setInterval("loop()",1500);
</script>
</div>
</body>
</html>

这段代码如何改成鼠标悬停动画停止，鼠标移出动画继续。

...全文

945 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

ZXY900213 2011-09-20

打赏
举报

不知道你要移到哪个元素才停止。是不是gg？

var gg = document.getElementById("gg");

gg.onmouseover = function(){

    window.clearInterval(timer);

}

gg.onmouseout = function(){

    timer = window.setInterval("loop()",1500);

}