ResponsiveSlides.js幻灯片未被调用

Question

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

在网站的负责人中，我有

<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'）行之前发出警告.responseSlides（）;'但是如果我把它放在该行之后，它就不会被调用。我可以在浏览器中键入url以获取相应的.js文件。

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

Answer 1

当你打电话时，你应该使用它：

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

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

为了帮助您解决此类问题，首先应在控制台中输入jQuery来确保您拥有jQuery。对于您的网站，它就在那里：

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

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

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