Jquery 鼠标悬停与 setTimeout(） 和淡入/淡出问题

Jquery mouseover with setTimeout() and fadeIn/fadeOut issues

本文关键字：淡入 淡出 出问题 鼠标 悬停 setTimeout Jquery      更新时间：2023-09-26

我这里有 2 个问题：

1）我尝试在下面的jquery鼠标悬停时旋转相册中的照片，但是鼠标退出时循环无法停止。

2）我不知道如何使用淡入/淡出功能制作旋转/幻灯片？

    var photo_timers  = new Array;
    var photo  = new Array;  
    var base_url  = 'http://www.example.com'; 
    function changeThumb( id, url )
    {
      document.getElementById(id).src = url;
    }       
$("img[id*='album_slideshow_']").live('mouseover', function() {
    var image_id    = $(this).attr("id");
    var id_split    = image_id.split('_');
    var album_id    = id_split[2];      
    $.post(base_url + '/ajax_rotate_album_photos.php', { album_id: album_id },
    function(response) {                       
      if(response.count > 0) {
        for(var i=0; i < response.pid.length; i++) {
          var photo_src = base_url + '/images/picturethumbs/' + response.pid[i].id + '-1.jpg';
          photo[i] = new Image();
          photo[i].src = photo_src;                                                                     
        }
        for(var i=0; i < response.pid.length; i++) {
          var photo_src = base_url + '/images/picturethumbs/' + response.pid[i].id + '-1.jpg';                             
          photo_timers[i] = setTimeout("changeThumb('" + image_id + "','" + photo_src + "')", i*100*10);                                                        
        }            
      }                  
    }, "json");
}).live('mouseout', function() {
    var image_id    = $(this).attr("id");
    var id_split    = image_id.split('_');
    var album_id    = id_split[2];
    $.post(base_url + '/ajax_rotate_album_photos.php', { album_id: album_id },
    function(response) {                       
      if(response.count > 0) {
        for(var i=0; i < response.pid.length; i++) {
          if( typeof photo_timers[i] == "number" ) {
            clearTimeout(photo_timers[i]);
          }                                                                     
        }            
      }                  
    }, "json");
  $(this).attr('src', base_url + '/images/albums/' + album_id + '.jpg');                                                    
});

在 setTimeout 中设置整个 for 循环

var loopTimer; //global variable
if(response.count > 0) {
loopTimer = setTimeout((function(){
        for(var i=0; i < response.pid.length; i++) {
          var photo_src = base_url + '/images/picturethumbs/' + response.pid[i].id + '-1.jpg';
          photo[i] = new Image();
          photo[i].src = photo_src;                                                                     
        }
        for(var i=0; i < response.pid.length; i++) {
          var photo_src = base_url + '/images/picturethumbs/' + response.pid[i].id + '-1.jpg';                             
          photo_timers[i] = setTimeout("changeThumb('" + image_id + "','" + photo_src + "')", i*100*10);                                                        
        }}),1000);
      }

在鼠标输出时，只需清除循环计时器

if(response.count > 0) {
        clearTimeout(loopTimer);
        for(var i=0; i < response.pid.length; i++) {
          if( typeof photo_timers[i] == "number" ) {
            clearTimeout(photo_timers[i]);
          }                                                                     
        }            
      }
相关文章：