在幻灯片图像褪色徘徊

Question

我创建（从网上找到其他脚本帮助）的幻灯片脚本，变成其他图像悬停时会为灰度并暂停在同一时间幻灯片外部图像时。问题是，当我将鼠标悬停在其中一张不属于幻灯片的图片上时，我无法让它们淡入淡出。我已经尝试了很多事情来解决这个问题，包括增加在现有的图像所需要的灰度图像，但我不能让看起来一样的，所以它的一种毫无意义的影响。

这种情况的代码如下（我道歉，如果这是为Javascript一团糟，我还是个新手）：

如果

// Holds the alt description of an image 
var desc; 

// Used to try to solve problem 
var bgimg; 
var bgli; 
var current; 

$(document).ready(function() { 
    //Execute the slideShow, set to 3 seconds for each images 
slideShow(1000); 
current = $('ul.slideshow li.show'); 
}); 

$(window).focus(function() { 
    timer = setInterval('gallery()', speed); 
}); 

$(window).blur(function() { 
    clearInterval(timer); 
}); 

function slideShow(speed) { 
    //Set the opacity of all images to 0 
    $('ul.slideshow li').css({opacity: 0.0}); 
    //Get the first image and display it (set it to full opacity) 
    $('ul.slideshow li:first').css({opacity: 1.0}).addClass('show'); 
    //Call the gallery function to run the slideshow  
    var timer = setInterval('gallery()', speed); 
    desc = $('ul.slideshow li.show').find('img').attr('alt'); 

    //pause the slideshow on mouse over 
    $('img.color').hover(
    function() { 
     clearInterval(timer); 
     $('#caption').stop().animate({'height': '70px'}, 1000); 
     cptxt(desc); 
     if (this.id == "img6" || this.id == "img7" || this.id == "img8" || this.id == "img9" || this.id == "img10") { 
      $(img1).stop().animate({"opacity": "0"}, "slow"); 
      $(img2).stop().animate({"opacity": "0"}, "slow"); 
      $(img3).stop().animate({"opacity": "0"}, "slow"); 
      $(img4).stop().animate({"opacity": "0"}, "slow"); 
      $(img5).stop().animate({"opacity": "0"}, "slow"); 
     } 
    }, 
    function() { 
     timer = setInterval('gallery()', speed); 
     $(img1).stop().animate({"opacity": "1"}, "slow"); 
     $(img2).stop().animate({"opacity": "1"}, "slow"); 
     $(img3).stop().animate({"opacity": "1"}, "slow"); 
     $(img4).stop().animate({"opacity": "1"}, "slow"); 
     $(img5).stop().animate({"opacity": "1"}, "slow"); 
     $('#caption').stop().animate({'height': '0px'}, 1000); 
     $('#caption').html(''); 
    }); 
} 

function gallery() { 
    //if no IMGs have the show class, grab the first image 
    if ($('ul.slideshow li.show').length){ 
    // if we found an item with the show class, assign it to current 
     current = $('ul.slideshow li.show'); 
    } else { 
     // otherwise nothing is being shown, default to first element 
     $('#ul.slideshow li:first'); 
    } 

    //trying to avoid speed issue   
    if (current.queue('fx').length == 0) { 
     //Get next image, if it reached the end of the slideshow, rotate it back to the first image 
     var next; 
     // if there are additional elements (true when .length > 0) 
     if (current.next().length) { 
      next = current.next(); 
      if (next.attr('id') == 'dark') { 
       bgli = next; 
       bgimg = next.find('img'); 
       next = next.next(); 
      } 
     } else { 
      // there is no next element, go back to first. 
      next = $('ul.slideshow li:first'); 
     } 

     desc = next.find('img').attr('alt'); 
     //Set the fade in effect for the next image, show class has higher z-index 
     next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); 
     //Hide the current image 
     current.animate({opacity: 0.0}, 1000).removeClass('show'); 
    } 
} 

function cptxt(altmsg) { 
    $('#caption').html(altmsg); 
} 

$(document).ready(function(){ 
    $('img.color').hover(
    function() { 
     if (this.id == "img1") { 
      $(img2).stop().animate({"opacity": "0"}, "slow"); 
      $(img3).stop().animate({"opacity": "0"}, "slow"); 
      $(img4).stop().animate({"opacity": "0"}, "slow"); 
      $(img5).stop().animate({"opacity": "0"}, "slow"); 
      $(img6).stop().animate({"opacity": "0"}, "slow");  
      $(img7).stop().animate({"opacity": "0"}, "slow"); 
      $(img8).stop().animate({"opacity": "0"}, "slow"); 
      $(img9).stop().animate({"opacity": "0"}, "slow"); 
      $(img10).stop().animate({"opacity": "0"}, "slow"); 
     } 
     else if (this.id == "img2") { 
      $(img1).stop().animate({"opacity": "0"}, "slow"); 
      $(img3).stop().animate({"opacity": "0"}, "slow"); 
      $(img4).stop().animate({"opacity": "0"}, "slow"); 
      $(img5).stop().animate({"opacity": "0"}, "slow"); 
      $(img6).stop().animate({"opacity": "0"}, "slow"); 
      $(img7).stop().animate({"opacity": "0"}, "slow"); 
      $(img8).stop().animate({"opacity": "0"}, "slow"); 
      $(img9).stop().animate({"opacity": "0"}, "slow"); 
      $(img10).stop().animate({"opacity": "0"}, "slow"); 
     } 
     else if (this.id == "img3") { 
      $(img1).stop().animate({"opacity": "0"}, "slow"); 
      $(img2).stop().animate({"opacity": "0"}, "slow"); 
      $(img4).stop().animate({"opacity": "0"}, "slow"); 
      $(img5).stop().animate({"opacity": "0"}, "slow"); 
      $(img6).stop().animate({"opacity": "0"}, "slow"); 
      $(img7).stop().animate({"opacity": "0"}, "slow"); 
      $(img8).stop().animate({"opacity": "0"}, "slow"); 
      $(img9).stop().animate({"opacity": "0"}, "slow"); 
      $(img10).stop().animate({"opacity": "0"}, "slow"); 
     } 
     else if (this.id == "img4") { 
      $(img1).stop().animate({"opacity": "0"}, "slow"); 
      $(img2).stop().animate({"opacity": "0"}, "slow"); 
      $(img3).stop().animate({"opacity": "0"}, "slow"); 
      $(img5).stop().animate({"opacity": "0"}, "slow"); 
      $(img6).stop().animate({"opacity": "0"}, "slow"); 
      $(img7).stop().animate({"opacity": "0"}, "slow"); 
      $(img8).stop().animate({"opacity": "0"}, "slow"); 
      $(img9).stop().animate({"opacity": "0"}, "slow"); 
      $(img10).stop().animate({"opacity": "0"}, "slow"); 
     } 
     else if (this.id == "img5") { 
      $(img1).stop().animate({"opacity": "0"}, "slow"); 
      $(img2).stop().animate({"opacity": "0"}, "slow"); 
      $(img3).stop().animate({"opacity": "0"}, "slow"); 
      $(img4).stop().animate({"opacity": "0"}, "slow"); 
      $(img6).stop().animate({"opacity": "0"}, "slow"); 
      $(img7).stop().animate({"opacity": "0"}, "slow"); 
      $(img8).stop().animate({"opacity": "0"}, "slow"); 
      $(img9).stop().animate({"opacity": "0"}, "slow"); 
      $(img10).stop().animate({"opacity": "0"}, "slow"); 
     } 
    }, 
    function() { 
     $(img1).stop().animate({"opacity": "1"}, "slow"); 
     $(img2).stop().animate({"opacity": "1"}, "slow"); 
     $(img3).stop().animate({"opacity": "1"}, "slow"); 
     $(img4).stop().animate({"opacity": "1"}, "slow"); 
     $(img5).stop().animate({"opacity": "1"}, "slow"); 
     $(img6).stop().animate({"opacity": "1"}, "slow"); 
     $(img7).stop().animate({"opacity": "1"}, "slow"); 
     $(img8).stop().animate({"opacity": "1"}, "slow"); 
     $(img9).stop().animate({"opacity": "1"}, "slow"); 
     $(img10).stop().animate({"opacity": "1"}, "slow"); 
     } 
    ); 
}); 

对不起的代码是可怕的：d。我花了几分钟试图正确地布置它，但很多都需要清理。

反正重申，悬停在幻灯片图像truns其它影像的正确灰度。将鼠标悬停在其他图标上不会将当前的幻灯片图像变为灰度。

任何帮助，将不胜感激。

按照要求，链接的jsfiddle http://jsfiddle.net/KXW4f/12/

幻灯片不会出现在它的工作，但我可能在该网站上选择了一些错误的设置。无论如何，它在我的个人电脑上运行时都能正常工作，但总体思路已经显示出来了。

目前，幻灯片图像刚刚淡出为白色背景（不透明度变为0），但我想要的是灰度图像显示为它淡出。谢谢。

Answer 1

好，与例如它是一个更容易理解。不过你的代码的概念是有点乱...;）

首先，链接到更正后的代码（现在应该工作）：http://jsfiddle.net/Aletheios/ZZHjS/2/（新链接）

我已经做了以下变化：

1. 声明的全局变量timer，speed和img1 - img8解决的几个误区。
2. 删除幻灯片开始在slideShow()，幻灯片启动了两次（slideShow()和window.focus）。
3. 增加了大灰度图像的显示/显示功能。该代码可检测幻灯片中当前显示的图像，并在请求时显示灰度对应图像。

这是代码（见的jsfiddle了解详细信息）：

$("img.color").hover(function(){ 
    var li; 
    for (var i = 6; i <= 8; ++i) { 
     li = $("#img"+i).closest("li"); 
     if (li.hasClass("show")) { 
      li.next().css("opacity", 1); 
     } 
    } 
    ... 
}, function() { 
    $(...).stop().animate({"opacity": "1"}, "slow", function(){ 
     $(this).closest("li").next().css("opacity", 0); 
    }); 
}); 

一些注释：

1. 的ID（如HTML标记）仅在使用不超过一次意义; ）
2. 如果将jQuery选择器组合在一起，可以使代码更具可读性（并且可能更高效）。因此，而不是$(img1).animate()和$(img2).animate()陆续更好地使用$([img1, img2].join(",")).animate()。

希望帮助...;）此外，如果你还没有使用它，我建议你用Firebug的工作;这是一个很好的工具来调试你的JS代码。