修改：自动播放的jQuery幻灯片
一位读者在《自动播放的jQuery幻灯片》中反映了一个问题，就是鼠标在缩略图上快速反复移动的时候，会出大图和缩略图不一致、鼠标输出缩略图幻灯片仍在快速切换和 CPU 占用飙涨等问题。因为幻灯片切换的时候有一个动画过程，鼠标每经过一张缩略图都会执行这个动画过程，如果上一个动画过程还没执行完鼠标就移到另一张缩略图上，那这张幻灯片的切换动画会等到上一个动画执行完成才会执行。如果鼠标在这些缩略图上来回移动，那将会“累积”很多动画，它们会一个接一个的执行，所以引发上上面那些问题。
要修复上面的问题，加上一条判断语句即可：如果有动画正在执行，鼠标移到缩略图上就不执行动画函数。具体代码如下（和原来的相比就多了一句判断）：
var theInt = null;
var curclicked = 0;
$(function(){
$('#transparence').css('opacity','0.4');
$('#pic_list img').css({'opacity':'0.6'});
$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
$('#pic_list a').click(function(){return false});
t(0);
$('#pic_list img').mouseover(function(){
if($('#this_pic').attr('src') == $(this).attr('src')) return;
if(!$(this).is(':animated')){
t($('#pic_list img').index($(this)));
}
})
})
t = function(i){
clearInterval(theInt);
if( typeof i != 'undefined' )
curclicked = i;
$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
theInt = setInterval(function (){
i++;
if (i > $('#pic_list img').length - 1) {i = 0};
$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
},3000)
}
