图片轮播

来源：互联网发布：git windows 编辑：程序博客网时间：2024/04/29 18:54

一个页面多张图片的轮播： http://www.jq22.com/yanshi70

实现功能：图片正常轮播，按钮可选择制定图片显示。鼠标移入定时器停止，鼠标移出定时器开始。

问题描述：鼠标第一次移入，定时器停止，移出定时器开始，但是图片速度开始加快，启动了两个定时器，鼠标移入定时器还在启动中。只要鼠标移出一次就添加一个定时器。

错误代码：

<body>
<script>
$(function(){
var index = 0;
var imgWidth = -300;
var left = 0;
var timer = setInterval(marginLeft,1000);
$('imgBox').mouseover(function(){ clearInterval(timer); });
$('imgBox').mouseout(function() { setInterval(timer); });
});
function marginLeft(){
index ++;
index = index==4 ? 0 : index;
left = imgWidth * index;
$('imgBox').css('margin-left', left + 'px');
}
</script>

</body>

错误原因：鼠标移入启动定时器的时候，又重新启动了一个定时器。所以定时器会越来越多。

解决方法： $('imgBox').mouseout(function() {timer = setInterval(timer); }); 重置定时器 timer，并启动。

0 0