我用jquery写了一个鼠标移入时暂停的程序，但是只有在IE里用F12-debug后才能用

Question

JS code----- $("img").hover(function(){
clearInterval(sliderIntervalID);
},function(){sliderIntervalID = setInterval(.....)})
html code-----<img src="./images/key_analysis.png"/>
这个代码一开始测试的时候没有作用。但是当我在IE9里用F12--debug时看到鼠标移入img里后，触发了hover方法而且执行了clearInterval。之后停止调试后，滚动框可以停止了，但是一刷新又不能用了。也就是说img是在一个图片切换的框里，写了鼠标移入后暂停的代码，只有在debug一遍后才起作用，刷新后不起作用，请问咋办呢？多谢！！！

Answer 1

你开始有定义sliderIntervalID这个定时器么？

Answer 2

定义了，都是现成的，从网上下载的。我就是把暂停那段代码，放到img的hover里。而且debug后是可以用的，只是一刷新就没了。

Answer 3

我怀疑sliderIntervalID这个值在你刷新后没值了。。不向下执行了。。

Answer 4

很有可能，这个是源程序，那个大哥帮我看看行吗，js不太熟
if(typeof jQuery != 'undefined') {
jQuery(function($) {
$.fn.extend({
loopedSlider: function(options) {
var settings = $.extend({}, $.fn.loopedSlider.defaults, options);

return this.each(
function() {
if($.fn.jquery < '1.3.2') {return;}
var $t = $(this);
var o = $.metadata ? $.extend({}, settings, $t.metadata()) : settings;

var distance = 0;
var times = 1;
var slides = $(o.slides,$t).children().size();
var width = $(o.slides,$t).children().outerWidth();
var position = 0;
var active = false;
var number = 0;
var interval = 0;
var restart = 0;
var pagination = $("."+o.pagination+" li a",$t); if(o.addPagination && !$(pagination).length){
var buttons = slides;
$($t).append("<ul class="+o.pagination+">");
$(o.slides,$t).children().each(function(){
if (number<buttons) {
$("."+o.pagination,$t).append("<li><a rel="+(number+1)+" href=\"#\" >"+(number+1)+"</a></li>");
number = number+1;
} else {
number = 0;
return false;
}
$("."+o.pagination+" li a:eq(0)",$t).parent().addClass("active");
});
pagination = $("."+o.pagination+" li a",$t);
} else {
$(pagination,$t).each(function(){
number=number+1;
$(this).attr("rel",number);
$(pagination.eq(0),$t).parent().addClass("active");
});
} if (slides===1) {
$(o.slides,$t).children().css({position:"absolute",left:position,display:"block"});
return;
} $(o.slides,$t).css({width:(slides*width)}); $(o.slides,$t).children().each(function(){
$(this).css({position:"absolute",left:position,display:"block"});
position=position+width;
}); $(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:-width}); if (slides>3) {
$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:-width});
} if(o.autoHeight){autoHeight(times);} $("img").hover(function(){
clearInterval(sliderIntervalID);
},function(){
sliderIntervalID = setInterval(function(){
if(active===false) {animate("next",true);}
},o.autoStart);
function autoStart() {
if (o.restart) {
clearInterval(sliderIntervalID);
clearInterval(interval);
clearTimeout(restart);
restart = setTimeout(function() {
interval = setInterval( function(){
animate("next",true);
},o.autoStart);
},o.restart);
} else {
sliderIntervalID = setInterval(function(){
if(active===false) {animate("next",true);}
},o.autoStart);
}
};
});

$(".next",$t).click(function(){
if(active===false) {
animate("next",true);
if(o.autoStart){
if (o.restart) {autoStart();}
else {clearInterval(sliderIntervalID);}
}
} return false;
}); $(".previous",$t).click(function(){
if(active===false) {
animate("prev",true);
if(o.autoStart){
if (o.restart) {autoStart();}
else {clearInterval(sliderIntervalID);}
}
} return false;
}); if (o.containerClick) {
$(o.container,$t).click(function(){
if(active===false) {
animate("next",true);
if(o.autoStart){
if (o.restart) {autoStart();}
else {clearInterval(sliderIntervalID);}
}
} return false;
});
} $(pagination,$t).click(function(){
if ($(this).parent().hasClass("active")) {return false;}
else {
times = $(this).attr("rel");
$(pagination,$t).parent().siblings().removeClass("active");
$(this).parent().addClass("active");
animate("fade",times);
if(o.autoStart){
if (o.restart) {autoStart();}
else {clearInterval(sliderIntervalID);}
}
} return false;
}); if (o.autoStart) {
sliderIntervalID = setInterval(function(){
if(active===false) {animate("next",true);}
},o.autoStart);
function autoStart() {
if (o.restart) {
clearInterval(sliderIntervalID);
clearInterval(interval);
clearTimeout(restart);
restart = setTimeout(function() {
interval = setInterval( function(){
animate("next",true);
},o.autoStart);
},o.restart);
} else {
sliderIntervalID = setInterval(function(){
if(active===false) {animate("next",true);}
},o.autoStart);
}
};
} function current(times) {
if(times===slides+1){times = 1;}
if(times===0){times = slides;}
$(pagination,$t).parent().siblings().removeClass("active");
$(pagination+"[rel='" + (times) + "']",$t).parent().addClass("active");
}; function autoHeight(times) {
if(times===slides+1){times=1;}
if(times===0){times=slides;}
var getHeight = $(o.slides,$t).children(":eq("+(times-1)+")",$t).outerHeight();
$(o.container,$t).animate({height: getHeight},o.autoHeight);
}; function animate(dir,clicked){
active = true;
switch(dir){
case "next":
times = times+1;
distance = (-(times*width-width));
current(times);
if(o.autoHeight){autoHeight(times);}
if(slides<3){
if (times===3){$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});}
if (times===2){$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:width});}
}
$(o.slides,$t).animate({left: distance}, o.slidespeed,function(){
if (times===slides+1) {
times = 1;
$(o.slides,$t).css({left:0},function(){$(o.slides,$t).animate({left:distance})});
$(o.slides,$t).children(":eq(0)").css({left:0});
$(o.slides,$t).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});
}
if (times===slides) $(o.slides,$t).children(":eq(0)").css({left:(slides*width)});
if (times===slides-1) $(o.slides,$t).children(":eq("+(slides-1)+")").css({left:(slides*width-width)});
active = false;
});
break; 
case "prev":
times = times-1;
distance = (-(times*width-width));
current(times);
if(o.autoHeight){autoHeight(times);}
if (slides<3){
if(times===0){$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:(-width)});}
if(times===1){$(o.slides,$t).children(":eq(0)").css({position:"absolute",left:0});}
}
$(o.slides,$t).animate({left: distance}, o.slidespeed,function(){
if (times===0) {
times = slides;
$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:(slides*width-width)});
$(o.slides,$t).css({left: -(slides*width-width)});
$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});
}
if (times===2 ) $(o.slides,$t).children(":eq(0)").css({position:"absolute",left:0});
if (times===1) $(o.slides,$t).children(":eq("+ (slides-1) +")").css({position:"absolute",left:-width});
active = false;
});
break;
case "fade":
times = [times]*1;
distance = (-(times*width-width));
current(times);
if(o.autoHeight){autoHeight(times);}
$(o.slides,$t).children().fadeOut(o.fadespeed, function(){
$(o.slides,$t).css({left: distance});
$(o.slides,$t).children(":eq("+(slides-1)+")").css({left:slides*width-width});
$(o.slides,$t).children(":eq(0)").css({left:0});
if(times===slides){$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});}
if(times===1){$(o.slides,$t).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});}
$(o.slides,$t).children().fadeIn(o.fadespeed);
active = false;
});
break; 
default:
break;
}
};
}
);
}
});
$.fn.loopedSlider.defaults = {
container: ".container", //Class/id of main container. You can use "#container" for an id.
slides: ".slides", //Class/id of slide container. You can use "#slides" for an id.
pagination: "pagination", //Class name of parent ul for numbered links. Don't add a "." here.
containerClick: true, //Click slider to goto next slide? true/false
autoStart: 0, //Set to positive number for true. This number will be the time between transitions.
restart: 0, //Set to positive number for true. Sets time until autoStart is restarted.
slidespeed: 300, //Speed of slide animation, 1000 = 1second.
fadespeed: 200, //Speed of fade animation, 1000 = 1second.
autoHeight: 0, //Set to positive number for true. This number will be the speed of the animation.
addPagination: false //Add pagination links based on content? true/false
};
});
}

Answer 5

发下sliderIntervalID是在哪里定义的,看是不是在回调函数里面

Answer 6

$("img").hover(function(){
clearInterval(sliderIntervalID);
},function(){
sliderIntervalID = setInterval(function(){
if(active===false) {animate("next",true);}
},o.autoStart);
function autoStart() {
if (o.restart) {
clearInterval(sliderIntervalID);
clearInterval(interval);
clearTimeout(restart);
restart = setTimeout(function() {
interval = setInterval( function(){
animate("next",true);
},o.autoStart);
},o.restart);
} else {
sliderIntervalID = setInterval(function(){
if(active===false) {animate("next",true);}
},o.autoStart);
}
};
}); 上面这段是我加的，里面有sliderIntervalID的定义。这段也是我根据下面这段改的。
if (o.autoStart) {
sliderIntervalID = setInterval(function(){
if(active===false) {animate("next",true);}
},o.autoStart);
function autoStart() {
if (o.restart) {
clearInterval(sliderIntervalID);
clearInterval(interval);
clearTimeout(restart);
restart = setTimeout(function() {
interval = setInterval( function(){
animate("next",true);
},o.autoStart);
},o.restart);
} else {
sliderIntervalID = setInterval(function(){
if(active===false) {animate("next",true);}
},o.autoStart);
}
};
}

Answer 7

我现在发现我这个鼠标暂停的功能是：第一次鼠标放上去时，能暂停，但是鼠标移开后也不能向下滚动了。
点击下一个按钮后，可以自动向下滚动，但是鼠标放上去后就不暂停了。也就是说hover里的代码执行后，鼠标移开里的代码就不起作用了。而执行了鼠标移开后的代码，hover里的代码又不起作用了。我想是因为这2段代码是从不同地方拷贝的，互相间没有联系。

Answer 8

最新发现，刷新后正常的鼠标移入移出能暂停，都没问题。但是在页面上，进行一些其他的操作，就不行了。好像是鼠标移入时，clearInterval（id）里的id乱了