Question

我有一个滚动网站，其中包含两个用于旋转图像的jQuery“滑块”（http://bxslider.com/）。网站运行正常。

客户端现在需要第三个jQuery功能（jQuery Roundabout - v2.1.1 http://fredhq.com/projects/roundabout）。添加后，这会打破两个初始滑块，但页面滚动并添加了环形脚本。

在彻底寻找解决方案之后，我在新添加的环形交叉路口添加了noConflict。这修复了两个初始滚动条，新添加的环形交叉口仍然可以正常工作，但这会打破网站上的滚动脚本。

我不是使用Java或jQuery但我通常会随着时间的推移找到修复程序。这让我很难过，但我确信这很简单，我很想念。以下是索引文件中的scrips，按顺序丢失了不相关的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（点）irishofcourse.co.cc/firebrand/index-banners.html是测试网站的网址，其中留下了noConflict。注意：链接不滚动页面，但其他一切都有效（案例研究是滚动的一部分。）

删除行<script src="http://fredhq.com/lib/js/libraries/jquery.js"></script>会破坏网站上的所有jQuery。我不确定那是什么意思，但我想我应该提一下。

非常感谢任何帮助。本。

======= UPDATE ======

我认为该行是以前在网站上的元素的剩余代码。我删除了它以及我认为是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中唯一没有作用于页面的脚本/函数。

再次感谢您的继续帮助。

Answer 1

问题：

你包括jQuery三次和不同的版本。
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>。

=== UPDATE ===

抱歉，无法找到jCarousel，因为noConflict方法放弃了jQuery对$变量的控制。你能在common.js（$）的第三行添加$(document).ready(function($) {吗？

=== UPDATE ===

好的，我的最后一个建议是愚蠢的;您可以再次删除$。接下来尝试:-)
请将行$("#done-slider").jcarousel({和$("#do-page-slider").jcarousel({替换为jQuery("#done-slider").jcarousel({和jQuery("#do-page-slider").jcarousel({。

=== UPDATE ===

这是成功的，但现在我们遇到了新的错误。请将$替换为jQuery行中的$('#elements').jScrollPane({。

=== UPDATE ===

同时将其替换为$('#elements').data('jsp').scrollToX(2000);行。

=== UPDATE ===

同样，您必须在$开头的两行中将jQuery替换为$.scrollTo(。

冲突的jQuery脚本（NoConflict修复了一个但打破了其他脚本）

1 个答案: