代码之家 › 专栏 › 技术社区 › Predz

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

fade slideshow jquery-animate jquery javascript

Predz · 技术社区 · 12 年前

我创建了一个幻灯片放映脚本(在网上其他脚本的帮助下),当悬停时,它会将其他图像变成灰度,同时暂停幻灯片放映。问题是,当我把鼠标悬停在幻灯片中没有的图片上时,我无法让它们褪色。我尝试了很多方法来解决这个问题,包括在现有图像上添加所需的灰度图像,但我无法获得相同的效果,所以这有点毫无意义。

代码如下(如果这是一团糟,我很抱歉,我对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),但我想要的是灰度图像在淡出时出现。谢谢

1 回复 | 直到 5 年前

Aletheios 12 年前

好的,有了这个例子,就更容易理解了。尽管如此,代码的概念还是有点混乱…;)

首先,指向已更正代码的链接(现在应该可以工作了): http://jsfiddle.net/Aletheios/ZZHjS/2/ (新链接)

我做了以下更改:

声明的全局变量 timer , speed 和 img1 - img8 以解决几个错误。
已删除幻灯片放映开始时间 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代码的好工具。