在幻燈片圖像褪色徘徊

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代碼。