javascript - 外部画像にカーソルを合わせると、スライドショーで画像がフェードする

Question

私は（オンラインで見つけた他のスクリプトの助けを借りて）ホバーすると他の画像をグレースケールに変え、同時にスライドショーを一時停止するスライドショースクリプトを作成しました。問題は、スライドショーの一部ではないこれらの画像の1つにカーソルを合わせると、それらをフェードさせることができないことです。これを解決するために、既存の画像に必要なグレースケール画像を追加するなど、さまざまな方法を試しましたが、同じように見える効果が得られないため、意味がありません。

このためのコードは次のとおりです（それが混乱している場合は、私はまだ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になります）が、私が望むのは、フェードアウトするときにグレースケール画像を表示することです。ありがとう。

score 1 · Accepted Answer

わかりました。例を使用すると、はるかに理解しやすくなりました。それにもかかわらず、あなたのコードの概念は少し厄介です...;）

まず、修正されたコードへのリンク（今すぐ機能するはずです）：http：//jsfiddle.net/Aletheios/ZZHjS/2/ （新しいリンク）

次の変更を行いました。

宣言されたグローバル変数timer、speedおよびimg1-img8いくつかのエラーを解決します。
スライドショーの開始を削除しましslideShow()た。スライドショーは2回開始されました（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マークアップなど）は、1回しか使用されない場合にのみ意味があります;）
jQueryセレクターをグループ化すると、コードをより読みやすく（そしておそらくより効率的に）することができます。したがって、代わりに、$(img1).animate()そして$(img2).animate()次々と使用する方がよいでしょう$([img1, img2].join(",")).animate()。

お役に立てば幸いです...;）さらに、まだ使用していない場合は、Firebugを使用することをお勧めします。これは、JSコードをデバッグするための優れたツールです。

javascript - 外部画像にカーソルを合わせると、スライドショーで画像がフェードする

1 に答える 1

Related

Reference