0

画像を回転させる2つのjQuery「スライダー」( http://bxslider.com/ )を備えたスクロールWebサイトがあります。サイトは正常に動作します。

クライアントは、3 番目の jQuery 機能 (jQuery Roundabout - v2.1.1 http://fredhq.com/projects/roundabout ) を必要としています。これを追加すると、最初の 2 つのスライダーが壊れますが、ページのスクロールと追加されたラウンドアバウト スクリプトは機能します。

解決策を徹底的に探した後、新しく追加されたラウンドアバウトに noConflict を追加しました。これにより、最初の 2 つのスクローラーと新しく追加されたラウンドアバウトは問題なく動作しますが、サイトのスクロール スクリプトが壊れます。

私は Java や jQuery の専門家ではありませんが、通常は時間の経過とともに修正を見つけます。これは私を困惑させましたが、私が見逃しているのは単純なものだと確信しています。以下は index ファイル内のスクリプトで、関係のない HTML を除いて順番に並べたものです:

<head>

<script src="js/queryLoader.js"></script>
<script defer src="js/plugins.js"></script>
<script defer src="js/commons.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>


</head>
<body onLoad="init()" id="body"> 


<script type="text/javascript" src="http://www.firebrand-digital.com/test/wp-content/uploads/2012/02/jquery.bxSlider.min_.js"></script>


<!-- Sliders script -->
<script type="text/javascript">


jQuery(document).ready(function()
{ 
    $('#scroller1').bxSlider(
        {
            auto: true,
            speed: 2000,
            pause: 6000,
            prevImage: 'http://www.firebrand-digital.com/test/wp-content/themes/twentyeleven/images/previous_arrow2.png',
            nextImage: 'http://www.firebrand-digital.com/test/wp-content/themes/twentyeleven/images/next_arrow2.png'
        }
    );
    $('#slider1').bxSlider(
        {
            auto: true,
            speed: 1500,
            pause: 5000,
        }
    );


});
</script>
<!-- End sliders script -->

....html....

<!-- Roundabout 2 script -->
  <script src="http://fredhq.com/lib/js/libraries/jquery.js"></script> 
<script src="http://fredhq.com/lib/js/projects/roundabout/jquery.roundabout2.js">     </script>   

 <script>
 jQuery.noConflict();

jQuery(document).ready(function() {
    jQuery('ul.caro').roundabout();
});
</script>
<!-- Roundabout 2 script -->

....html....
</body>

js/commons.js には、サイトをスクロールするために必要なすべてのスクリプトが含まれています。これはラウンドアバウト スクリプトから noConflict を削除すると機能するため、スライダー スクリプトとラウンドアバウト スクリプトの間に問題があることをまとめました。ここで、www(dot)irishofcourse.co.cc/firebrand/index-banners.html は、noConflict が残っているテスト サイトへの URL です。スクロールの一部）。

行を削除する<script src="http://fredhq.com/lib/js/libraries/jquery.js"></script>と、サイト上のすべての jQuery が壊れます。それが何を意味するのかはわかりませんが、言及する必要があると思いました。

どんな助けでも大歓迎です。ベン。

=======更新========

その行は、サイトにあった要素の残りのコードだと思います。commons.js からの残留コードであると思われるものと同様に、それを削除しました。ラウンドアバウトがなくてもスクロールは機能しますが、元に戻すと競合します。

まだ競合している不足している機能 - 左側のリンクをクリックしても、ページはそれぞれのセクションまでスクロールしません。私の知る限りでは、

$('#navigation .logo .bars > ul > li > img').on("click",function(){ $.scrollTo('#'+$(this).attr('class').split(' ')[0],500, {axis:'xy'}); }); $('#navigation .logo .bars > ul > li > span').on("click",function(){ $.scrollTo('#'+$(this).attr('class').split(' ')[0],500, {axis:'xy'}); });

これらは、ページのスクロールを制御する行です。ここは変えなければいけないところだと思います。これは、ページで動作していない commons.js 内の唯一のスクリプト/関数です。

今後ともよろしくお願いいたします。

4

1 に答える 1

4

問題:

  1. jQuery を 3 回、異なるバージョンで含めています。
  2. commons.js には jCarousel プラグインが必要です。これは plugins.js の後に含まれます。

提案:

  • <script src="ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>行と を削除し<script src="http://fredhq.com/lib/js/libraries/jquery.js"></script>ます。
  • <script defer src="js/plugins.js"></script>を の前に移動し<script defer src="js/commons.js"></script>ます。

===更新===

申し訳ありませんが、noConflict メソッドが $ 変数の jQuery の制御を放棄するため、jCarousel が見つかりません。$common.js の 3 行目に a を追加していただけない$(document).ready(function($) {でしょうか ( )。

===更新===

わかりました、私の最後の提案はばかげていました。再度取り外すことができます$。次の試み :-) andの行をandに
置き換えてください。$("#done-slider").jcarousel({$("#do-page-slider").jcarousel({jQuery("#done-slider").jcarousel({jQuery("#do-page-slider").jcarousel({

===更新===

これは成功しましたが、新しいエラーが発生しました。行中のも$に置き換えてください。jQuery$('#elements').jScrollPane({

===更新===

また、行に置き換え$('#elements').data('jsp').scrollToX(2000);ます。

===更新===

$ここでも、 で始まるjQuery2 行を に置き換える必要があります$.scrollTo(。

于 2012-06-30T17:37:20.447 に答える