Question

我正在尝试使用此处的文档实现一个简单的轮播：

http://sorgalla.com/jcarousel/docs/index.html

我已经让jQuery正常工作，我已经下载并引用了jCarousel 0.3.0，并且根据文档（http://sorgalla.com/jcarousel/docs/reference/installation.html）。我添加了最少的CSS（根据这里http://sorgalla.com/jcarousel/docs/reference/installation.html#reference-installation-setup）我有这个设置（实际链接到有效，加载JPG）：

<div style="height:114px" id="sidebarcarousel">       
    <ul>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
        <li><img src="http://path-to-file.jpg" /></li>
    </ul>            
 </div>

并在我的JavaScript中：

$(document).ready(function(e){
    $("#sidebarcarousel").jcarousel();
});

但是当我打开网页时绝对没有任何反应。文档的ready方法称为corectly，并且没有到任何JS或CSS文件的断开链接。可能是什么原因？我已经用旋转木马注释掉了代码，没有任何改变。此外，在JavaScript控制台中没有出现任何问题。我已经在最新的Safari，Firefox和Chrome中尝试过它。

可能是什么原因？我使用的是0.3.0（因此不要带旧版本相关的文档，因为它们可能无法正常工作，因为0.3.0是一个重大改变）。

Answer 1

您确定包含了正确版本的jQuery和jCarousel javascript文件吗？

<script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.jcarousel.min.js" type="text/javascript"></script>

此刻你只能看到旋转木马。除非您添加代码以使其滑动，否则它不会执行任何操作。您可以使用代码自动滑动，也可以按照here中的说明添加导航按钮。

Answer 2

您没有为<ul>添加任何课程，您必须将该ID提供给<ul>，而不是div。

在您的情况下：<ul id="sidebarcarousel" class="jcarousel-skin-tango">

为什么呢？因为它使用.js插件代码中的结构和类来操作<ul>元素。

jQuery调用：

jQuery(document).ready(function() {
     jQuery('#sidebarcarousel').jcarousel();
});

HTML：

<ul id="sidebarcarousel" class="jcarousel-skin-tango">
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
   <li><img src="http://path-to-file.jpg" /></li>
</ul>

请查看我在这里为您做的一个例子： http://jsfiddle.net/UCgEU/2/

PS：我为此示例添加了外部插件资源。您可以在左侧的“管理资源”下找到它们。

jCarousel 0.3.0无法正常工作

2 个答案: