【发布时间】：2012-06-30 17:18:23
【问题描述】：
我有一个滚动网站，其中包含两个旋转图像的 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 中唯一不作用于页面的脚本/函数。
再次感谢您一直以来的帮助。
【问题讨论】：
标签： javascript slider conflict jquery