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

两个问题：

您的脚本在加载DOM元素之前触发（a 将脚本放在标题中的结果。这就是为什么@powtac 说要将你的脚本封装在$（document）.ready（）;）
您的.coinslider（）函数在您的coinlider之前调用脚本已加载。

尝试按此顺序放置脚本：

<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>

接下来，请关注@ powtac的建议：

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

应该这样做。

修改：根据您的新源代码，删除第<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 });
    });

jQuery冲突：图库和滑块

2 个答案: