我有一个滚动网站,其中包含两个旋转图像的 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 中唯一不作用于页面的脚本/函数。
再次感谢您的持续帮助。