0

我正在尝试将responsiveSlides.js幻灯片添加到我正在处理的网站（此处），但似乎没有调用该方法。我猜这只是一个语法错误，但我一辈子都找不到它。

在网站的头部，我有

<link rel="stylesheet" type="text/css" href="{stylesheet=home/responsiveslides}" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://stonewatercc.com/js/responsiveslides.min.js"></script>

<script type="text/javascript">
  $(function () {
    $('#slider1').responsiveSlides();
  });
</script>

并且包含幻​​灯片图像的代码（在正文中）是

<ul class="rslides" id="slider1">
    <li><img src="{site_url}images/stonewatercc/slider/stonewater_pics01.jpg" alt=""></li>
    <li><img src="{site_url}images/stonewatercc/slider/stonewater_pics02.jpg" alt=""></li>
    <li><img src="{site_url}images/stonewatercc/slider/stonewater_pics03.jpg" alt=""></li>
</ul>

我可以在'$('slider1').responsiveSlides();' 行之前放置一个警报，但如果我把它放在该行之后，它就不会被调用。我可以在浏览器中输入任一 url 以访问相应的 .js 文件。

我真的很感激这方面的帮助，因为这让我很生气，因为我知道这可能是一件很简单的事情，我只是想念它......

4

1 回答 1

1

当你调用它时，你应该使用这个：

(function ($) {
  $('#slider1').responsiveSlides();
}(jQuery));

这将 jQuery 命名为这个特定的函数，这将确保您没有任何冲突的库，例如我看到的已加载的 Prototype。

为了帮助解决这种性质的问题，您应该首先通过jQuery在控制台中键入来确保您拥有 jQuery。就您的网站而言，它在那里：

在此处输入图像描述

接下来，尝试从控制台获取对象：$('#slider1'). 这样做，您可以看到它返回null：

在此处输入图像描述

显然有问题，因为我们可以id="slider1"通过查看源代码看到。

我采取的最后一步是确保它是正确的（我从未见过$(function()...），所以我直接在控制台中输入：(function($) { $('#slider1').responsiveSlides() }(jQuery))瞧，你的幻灯片开始了。

于 2013-08-14T20:16:17.793 回答