骑行jquery css背景图片

Question

我只想在鼠标悬停时更改视频的拇指...

我已经创建了这个脚本：

var thumb=0;
var num_thumbs = 11;
$("#<?=($video->id) ?>_video").hover(function(){
open_hover_div[<?=($video->id) ?>]=true;
var timer = setTimeout(function(){

if (open_hover_div[<?=($video->id) ?>]==true) {$(".over_<?=($video->id) ?>").fadeOut(200);$(".overTxt_<?=($video->id) ?>").delay(201).fadeIn();}}

, 1000);

var thumbs = setTimeout(function(){if (open_hover_div[<?=($video->id) ?>]==true) {
if ( thumb > (num_thumbs-1) ) {thumb=0;}
$("#<?=($video->id) ?>_video").css('background-image','url(images/video/<?=$video->id?>/'+thumb+'.jpg)');
thumb++;
}}
, 1000);

});

$("#<?=($video->id) ?>_video").mouseleave(function(){
thumb=0;
open_hover_div[<?=($video->id) ?>]=false; $(".over_<?=($video->id) ?>").fadeIn();$(".overTxt_<?=($video->id) ?>").hide();
$("#<?=($video->id) ?>_video").css('background-image','url(images/video/<?=$video->id?>.png)');
});

问题出在这部分：

var thumbs = setTimeout(function(){
if (open_hover_div[id) ?>]==true) {
if ( thumb > (num_thumbs-1) ) {thumb=0;}
$("#id) ?>_video").css('background-image','url(images/video/id?>/'+thumb+'.jpg)');
thumb++;
}}
, 1000);

当我把鼠标放在上面时，我只会看到一个变化，而不是一个循环变化......

脚本要做的事情：

• 在结束时，每 XXX 毫秒显示 1.jpg、2.jpg 等；
• 到达最后一张图片（例如 11.jpg，重新开始到 0.jpg）
• 在 mouseleave 时，如果我重新悬停鼠标，则会自动重新启动到 0.jpg

希望能清楚我的问题:(

Answer 1

您应该使用setInterval 而不是setTimeout。

var thumbs = setInterval(function(){ // ......

然后在mouseleave事件上，你应该清除间隔：

clearInterval(thumbs);
thumbs = null;