Question

我正在开发一个HTML页面，我想在同一页面上使用jQuery作为我的幻灯片放映和弹出图像（jQuery-lightbox）。但是，当我同时激活这两个功能时，弹出图像功能起作用，但幻灯片放映部分停止工作。也许我以错误的方式写了这个函数....

感谢您的帮助！

这是我的代码：

<head>
<!--slideshow-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function() {
      $('#slider').nivoSlider({

        effect:'random',

    });
});
</script>

<!--Lighbox-popout-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
    $(function() {
      $('#photo a').lightBox();
});
</script>
</head>

Answer 1

你正在加载两个不同版本的jquery相互干扰。摆脱这一行：

<script type="text/javascript" src="js/jquery.js"></script>

看看是否有帮助。

Answer 2

请勿使用window.load使用$(function() { ... })。此外，当您要求灯箱时，DOM还没有准备好。

Answer 3

你似乎包含了两个版本的jQuery，禁用其中一个版本，然后查看是否可以正常工作。

此外，丢失行effect:'random',中的尾随逗号，某些浏览器会在此处窒息。

Answer 4

使用此

<head>
<!--slideshow-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!--Lighbox-popout-->
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
    $(function() {
      $('#photo a').lightBox();
              $('#slider').nivoSlider({effect:'random'});
});
</script>
</head>

两个不同的jQuery函数在同一个HTML中

4 个答案: