2

ウェブサイトへのリンク

私のページスライドと画像スライダーの間に競合があると確信しています..

ページ スライドのコードは次のとおりです。 

<ul>
    <li>
        <a href="javascript:$.pageslide({ direction: 'right', href: '_secondary.html' })" class="first">Slide to the right, and load content from a secondary page.</a>
    </li>

    <li>
        <a href="javascript:$.pageslide({ direction: 'left', href: '/template/_secondary.html' })" class="second">Open the page programatically.</a>
    </li>
</ul>
<script>
var jq171 = jQuery.noConflict();
</script>
<script src="/template/js/jquery-1.7.1.min.js"></script>
<script src="/template/js/jquery.pageslide.js"></script>
<script>
    /* Default pageslide, moves to the right */
    $(".first").pageslide({ direction: "right"});

    /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
    $(".second").pageslide({ direction: "left"});
</script>`

画像スライダーは次のとおりです。このコードは、v1.5.1 と orbit-1.2.3 の 2 つの jQuery ライブラリを参照しています。

<div class="container" style="margin-top:20px; margin-left:10px;">
    <div id="featured"> 
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
    </div>

しばらくの間、両方を一緒に作業させましたが、何が競合を引き起こしているのかわかりません。さまざまなバリエーションで競合しないスクリプトを試しました..さらに情報が必要な場合はお知らせください。ありがとう！

4

4 に答える 4

3

ライブラリ スクリプトの読み込み速度が異なるため、コードが機能する場合と機能しない場合があります。使用を開始したときに所定の位置に収まるほど速くロードされる場合と、そうでない場合があります。readyそのため、最初のコードをブロックに入れる必要があります。

<script src="/template/js/jquery-1.7.1.min.js"></script>
<script src="/template/js/jquery.pageslide.js"></script>
<script type="text/javascript">
    var jq171 = jQuery.noConflict();
    jq171.ready(function ($) {
        /* Default pageslide, moves to the right */
        $(".first").pageslide({ direction: "right"});

        /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
        $(".second").pageslide({ direction: "left"});
    });
</script>

また、同じページまたは同じサイトで 2 つのライブラリを使用することを再検討することを強くお勧めします。1つで十分です！

ドキュメンテーション

于 2012-07-06T18:05:27.330 に答える
2

noConflictjQueryをロードした後に使用し、次の代わりに使用します$()。

var jq171 = jQuery.noConflict();
jq171(document).ready(function () {
   jq171(".first").pageslide({ direction: "right"});
   // ....
})
于 2012-07-06T18:06:41.903 に答える
1

$ 変数を渡して準備完了状態で jQuery を実行します。

jQuery ライブラリを 1 つだけ使用します。できれば最新のCDNのものを使用してください。

jQuery.noConflict();
jQuery.ready(function ($) {
    /* Default pageslide, moves to the right */
    $(".first").pageslide({ direction: "right"});

    /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
    $(".second").pageslide({ direction: "left"});
});

// Outside the ready state $ calls the other library.
于 2012-07-06T18:08:38.390 に答える
1

jQuery の読み込みには 3 つの異なるバージョンがあります。3 つのバージョンをロードする理由はありません。

于 2012-07-06T18:23:13.190 に答える