1

現在推奨されているスタイルのように、必要なすべてのオプションを div 内でインライン化して jq cycle2 をうまく利用できます。しかし、古い操作方法と同じように、代わりに初期化スクリプトを使用したいと思います。私は、ギャラリー オプションをマークアップから外し、可能な限り外部の .js ファイルに保存することを好みます。

「インライン」メソッドで完全に機能するすべてのオプションを使用してスクリプトを作成し、適切にリンクしていますが、これはサイレントに失敗し、scrollHorz を指定している間、スライドショーはフェードのデフォルト設定に戻ります。

また、前/次のボタンとアニメーション化された陽イオンを使用しています-キャプションは機能しますが、アニメーションはなく、前/次のボタンは表示されますが完全に失敗します.

私のスクリプトは「functionality.js」という名前のファイルにあり、API で概説されている「カスタム初期化スクリプト」の指示に従っていると思います。「plugins.js」という名前のファイルに関連するすべてのプラグインがあり、これらは問題なくリンクされており、以下のコンソール スクリーングラブでそれらが参照されていることがわかります。

次のマークアップ/スクリプト (わかりやすくするために、cycle2 の例をそのままコピーしたものです) と、コンソールのスクリーングラブへのリンクを参照してください。

<a href="#"><span class="prevControl">Prev</span></a>
<a href="#"><span class="nextControl">Next</span></a>

<div class="cycle-slideshow">
<img src="http://malsup.github.com/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"/>
<img src="http://malsup.github.com/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument"/>
<img src="http://malsup.github.com/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay"/>
<img src="http://malsup.github.com/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park"/>

<div class="cycle-caption"></div>
<div class="cycle-overlay"></div>

</div>

リンクされたスクリプト:

$('.cycle-slideshow').cycle({
fx: scrollHorz,
timeout: 2000,
speed: 700,
prev: ".prevControl",
next: ".nextControl",
caption-plugin: caption2,
overlay-fx-sel: "div"
});

そして、これはコンソールエラーのスクリーングラブへのリンクです

誰かがそれをアドバイスできるなら、それは非常にありがたいです、私はそれが単純なエラーだと確信しています!

前もって感謝します

4

2 に答える 2

2

サイクルが失敗する原因となっている JavaScript の単純なミスがいくつかあります。プログラムでスライドショーを初期化する場合、パラメーターは、データ属性を使用して指定する場合のようにハイフンを使用するのではなく、キャメルケースにする必要があります。また、文字列ベースのパラメーター値を引用符で囲む必要があります。そうしないと、スクリプトはそれらを変数と見なします。動作する例の更新バージョンを次に示します。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cycle2 Example</title>
</head>
<body>
    <a href="#"><span class="prevControl">Prev</span></a>
    <a href="#"><span class="nextControl">Next</span></a>

    <div class="slides">
        <img src="http://malsup.github.com/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"/>
        <img src="http://malsup.github.com/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument"/>
        <img src="http://malsup.github.com/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay"/>
        <img src="http://malsup.github.com/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park"/>

        <div class="cycle-caption"></div>
        <div class="cycle-overlay"></div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://malsup.github.io/jquery.cycle2.js"></script>
    <script>
        $('.slides').cycle({
            fx: "scrollHorz",
            timeout: 2000,
            speed: 700,
            prev: ".prevControl",
            next: ".nextControl",
            captionPlugin: "caption2",
            overlayFxSel: "div"
        });
    </script>
</body>
</html>

cycle-slideshowまた、サイクルプラグインによって自動初期化されないように、スライドショーをプログラムで設定するとき以外は、おそらく id またはクラスを使用するでしょう。

于 2013-07-10T10:05:57.930 に答える
1

このページからキャプション プラグインへの参照を含める必要があります。

http://www.malsup.com/jquery/cycle2/download/

例は次の場所にあります。

http://www.malsup.com/jquery/cycle2/demo/caption2.php

于 2013-04-09T16:59:11.253 に答える