1

WordPressでスライドショーを作成したいのですが、何らかの理由で機能しません。

私の.jsファイル：

(function ($) {
    function slideSwitch() {
        var $active = $('#gallery1 IMG.active');

        if ( $active.length == 0 ) $active = $('#gallery1 IMG:last');

        var $next =  $active.next().length ? $active.next()
                : $('#gallery1 IMG:first');

        $active.addClass('last-active');

        $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
    }

    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });

});

CSSスタイル：

#gallery1{
    position: relative;
    width:400px;
    height:300px;
}
#gallery1 img{
    position:absolute;
    z-index:8;
}
#gallery1 img.active{
    z-index:10;
}
#gallery1 img.last-active{
    z-index:9;
}

htmlコード：

 <div id="gallery1">
 <img src="img1.jpg" class="active"/>
 <img src="img2.jpg"/>
 <img src="img3.jpg"/>
  </div>

Chromes開発者ツールはエラーを表示しません。ファイアバグの間、このエラーを表示します：エラーブレークポイント：

しかし、最初の画像の何が問題なのかわかりません。正常に読み込まれます。誰かが問題を見ていますか？

4

5 に答える 5

1

@nezは、匿名関数の宣言方法が原因で、DOMの準備ができたときに関数が実行されないという点で正しいです。次のようになります。

(function ($) { 
    function slideSwitch() {
        var $active = $('#gallery1 IMG.active');

        if ( $active.length == 0 ) $active = $('#gallery1 IMG:last');

        var $next =  $active.next().length ? $active.next()
                : $('#gallery1 IMG:first');

        $active.addClass('last-active');

        $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
    }

    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });
}(jQuery));

この宣言は、プラグインがドル記号を使用する可能性のある他のライブラリと衝突しないようにするのに役立ちます。jQueryをドル記号にマッピングするIIFE（即時呼び出し関数式）に渡すことをお勧めします。実行範囲内で別のライブラリによって上書きされないようにします。彼らの文書から直接：

http://docs.jquery.com/Plugins/Authoring

于 2012-08-02T12:24:58.317 に答える
1

あなたはそれを誤解している。

次のリンクに示すように、プロトタイプと一緒に実行される競合のないバージョンのJQueryが必要です。http：//digwp.com/2009/06/include-jquery-in-wordpress-the-right-way/

次に、コードを作成します。

var $j = jQuery.noConflict();

function slideSwitch() {
    var $active = $j('#gallery1 IMG.active');

    if ( $active.length == 0 ) $active = $j('#gallery1 IMG:last');

    var $next =  $active.next().length ? $active.next()
            : $j('#gallery1 IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$j(function() {
    setInterval( "slideSwitch()", 5000 );
});
于 2012-08-02T12:31:44.553 に答える
0

提供された回答で私の問題は解決しました（その人が回答を削除した理由はわかりません）：これは機能しました：

var $j = jQuery.noConflict();

function slideSwitch() {
var $active = $j('#gallery1 IMG.active');

if ( $active.length == 0 ) $active = $j('#gallery1 IMG:last');

var $next =  $active.next().length ? $active.next()
        : $j('#gallery1 IMG:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
    $active.removeClass('active last-active');
});

}

$j(function() {
setInterval( "slideSwitch()", 5000 );
});
于 2012-08-02T12:43:52.483 に答える
0

コードで何が問題になっているのかわかりませんでしたが、SlidesJSjqueryプラグインを使用してスライドショーを作成する代わりの方法を次に示します。

$("#slides").slides({
    preload: true,        
    play: 2000,
    pause: 2500        
});

ここで実際の動作を確認してください （上記のコードはJavascriptエディターの下部にあります）

于 2012-08-02T12:06:52.037 に答える
0

まず第一に、最初の関数を実行したことはありません（そのため、画像が表示され、何も起こりません）。

試す：

$(function() {

  var slideSwitch = function () {
    var $active = $('#gallery1 IMG.active'),
      $next;

    if ($active.length == 0) {
      $active = $('#gallery1 IMG:last');
    }

    $next = $active.next().length ? $active.next() : $('#gallery1 IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
      });
  }

  setInterval(slideSwitch, 5000);
});
于 2012-08-02T12:12:40.340 に答える