jquery - jQuery 冲突：图库和滑块

Question

我正在尝试在同一页面上使用具有图像库功能的图像滑块。

他们都在以下语句中调用了一个 jquery 版本（fancybox.js 是 1.8.2） -

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/fancybox.js"></script>

我玩过 noConflict 但是我不能让这两个功能同时工作？

Answer 1

Two problems:

1. Your script is firing before your DOM elements are loaded (a result of putting your scripts in the header. This is why @powtac was saying to encapsulate your script in $(document).ready();)

2. Your .coinslider() function is calling before your coinslider script is loaded.

Try putting your scripts in this order:

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-libsans-r-b.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script type="text/javascript" src="js/fancybox.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.3"></script>

next, follow @powtac's advice:

$(document).ready(function() {
    $('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
});

That should do it.

Edit: based on your new source code, remove the line <script type="text/javascript" src="js/script.js"></script>.

Answer 2

尝试添加$(document).ready()arround

    $(document).ready(function() {
        $('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
    });