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。我花了几分钟试图把它正确地放好，但是很多都需要清理干净。

无论如何，重申一下，将鼠标悬停在幻灯片图像上会将其他图像正确地调整为灰度。将鼠标悬停在其他图像上不会将当前幻灯片图像转换为灰度图像。

任何帮助都将不胜感激。

根据要求，JSFiddle链接 http://jsfiddle.net/KXW4f/12/

幻灯片显示不起作用，但我可能在该网站上选择了一些错误的设置。无论如何，它在我的电脑上运行时都能正常工作，但我认为虽然显示了一般的想法。

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

Answer 1

好的，通过这个例子，它更容易理解。然而，你的代码的概念有点凌乱......;）

首先，指向更正后代码的链接（现在应该可以使用）：http://jsfiddle.net/Aletheios/ZZHjS/2/ （新链接）

我做了以下更改：

声明全局变量timer，speed和img1 - img8以解决多个错误。
已在slideShow()中移除幻灯片开始，幻灯片已开始两次（slideShow()和window.focus）。
为大灰度图像添加了显示/显示功能。该代码检测幻灯片中当前显示的图像，并在请求时显示其灰度对应图像。

这是代码（有关详细信息，请参阅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);
    });
});

一些注释：

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

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

悬停外部图像时幻灯片中的图像褪色

1 个答案: