0

我已经创建了（在其他在线脚本的帮助下）一个幻灯片脚本，它可以在悬停时将其他图像变为灰度并同时暂停幻灯片。问题是，当我将鼠标悬停在其中一张不属于幻灯片的图像上时，我无法让它们褪色。我已经尝试了很多方法来解决这个问题，包括在现有图像上添加所需的灰度图像，但我无法让效果看起来相同，所以它有点毫无意义。

代码如下（如果它是一团糟，我很抱歉，我对 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/

幻灯片似乎无法正常工作，但我可能在该站点上选择了一些错误的设置。无论如何，它在我的 PC 上运行时都可以工作，但我认为总体思路已显示。

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

4

1 回答 1

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 代码的好工具。

于 2012-08-13T23:12:06.400 回答