3

現在、JQuery サイクル プラグインを使用するサイトを持っています。このサイトでは、プラグインを使用してメインの背景画像を変更しています。サイクル プラグインは、HTML にページング セクションも作成します。私の場合は、一連の画像になるようにカスタマイズしました。

私がやろうとしているのは、その特定の「ページ」がアクティブになったら、ページャーの画像を変更することです。なんとか画像を変更できましたが、サイト全体で非常にスムーズなトランジションを使用しているため、ある画像から別の画像にスムーズにフェードしてから再び戻るようにしたいと考えています。

現時点での例をここで見ることができます: http://pegaso.mammalworld.com/「ギャラリー」画像にカーソルを合わせると、それがどのように機能しているかを確認できます。

これは、Jquery が使用するフェードアウト/フェードインではなく、変更する必要がある関数です。理想的には、次の画像ソースに単純にフェードしてから再びフェードアウトします。

function onAfter() {

    var myclass = $( ".activeSlide" ).find('img').attr('class');
    //alert(myclass);

    switch (myclass) {
        case "image-1":
            $(".image-1").attr("src","/images/image_small_01_off.jpg");            
            $('.image-2').fadeTo('fast', 0.5, function() {
                $(this).attr("src","/images/image_small_02.jpg").fadeTo("slow", 1);
            });

        break;
        case "image-2":
            $(".image-2").attr("src","/images/image_small_02_off.jpg");
            $('.image-3').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_03.jpg").fadeTo("slow", 1);
            });                
        break;

        case "image-3":
            $(".image-3").attr("src","/images/image_small_03_off.jpg");
            $('.image-4').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_04.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-4":
            $(".image-4").attr("src","/images/image_small_04_off.jpg");
            $('.image-5').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_05.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-5":
            $(".image-5").attr("src","/images/image_small_05_off.jpg");
            $('.image-6').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-6":
            $(".image-5").attr("src","/images/image_small_05_off.jpg");
            $('.image-6').fadeTo('slow',1, function() {
                $(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
            });
        break;

        default :
        $(".image-1").attr("src","/images/image_small_01_off.jpg");
        $(".image-2").attr("src","/images/image_small_02_off.jpg");
        $(".image-3").attr("src","/images/image_small_03_off.jpg");
        $(".image-4").attr("src","/images/image_small_04_off.jpg");
        $(".image-5").attr("src","/images/image_small_05_off.jpg");
        $(".image-6").attr("src","/images/image_small_06_off.jpg");
        break;
    }

}

アップデート

サイトへの影響を確認するには、ギャラリーにカーソルを合わせて、背景画像が変化するのを確認します。これにより、ページャーの画像が全体的に変化します。フェードは、背景画像と同じくらい滑らかにする必要があります...

助けてください！:)

4

1 に答える 1

1

2 つの固定イメージがある場合は、それほど難しくありません。

  1. コンテナーの背景をフェード先の画像に設定します。

  2. 画像をフェードアウトして背景画像を露出させる jQuery 関数。

    $('img').hover(function() {
     $(this).animate({
         opacity: 0
     }, 500);
 }, function() {
     $(this).animate({
         opacity: 1
     }, 500);
 });​
  3. 利益。

フィドル

http://jsfiddle.net/v6dtE/

于 2010-09-15T00:51:00.737 に答える