0

我有一个滚动网站,其中包含两个旋转图像的 jQuery“滑块”( http://bxslider.com/ )。该网站运行良好。

客户端现在想要第三个 jQuery 功能(jQuery Roundabout - v2.1.1 http://fredhq.com/projects/roundabout)。添加后,这会破坏两个初始滑块,但页面滚动和添加的环形交叉路口脚本有效。

在彻底寻找解决方案后,我在新添加的回旋处添加了 noConflict。这修复了两个初始滚动条,新添加的回旋处仍然可以正常工作,但这会破坏网站上的滚动脚本。

我不是 Java 和 jQuery 的专家,但我通常会随着时间的推移找到修复。这让我很困惑,但我敢肯定这是我所缺少的一些简单的东西。以下是索引文件中的脚本,按顺序列出了不相关的 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 三次和不同的版本。
  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>

=== 更新 ===

抱歉,找不到 jCarousel,因为 noConflict 方法放弃了 jQuery 对 $ 变量的控制。你可以在 common.js ( )$的第三行添加一个吗?$(document).ready(function($) {

=== 更新 ===

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

=== 更新 ===

那是成功的,但现在我们有一个新的错误。请同时替换该行中的$with 。jQuery$('#elements').jScrollPane({

=== 更新 ===

也替换它在行中$('#elements').data('jsp').scrollToX(2000);

=== 更新 ===

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

于 2012-06-30T17:37:20.447 回答