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);

当我把鼠标放在上面时，我只会看到一个变化，而不是自行车改变......

脚本必须：

on，每隔XXX毫秒显示1.jpg，2.jpg等;
到达最后一张图片（例如11.jpg，重新开始到0.jpg）
on mouseleave，如果我重新悬停鼠标，则自动重启到0.jpg

希望明确我的问题:(

Answer 1

您应使用setInterval代替setTimeout。

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

然后在mouseleave事件中，您应该清除间隔：

clearInterval(thumbs);
thumbs = null;

循环的jquery css背景图象

1 个答案: