3

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

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 方法被正确调用，并且没有任何 JS 或 CSS 文件的断开链接。可能是什么原因？我已经用轮播注释掉了代码，没有任何改变。此外，在 JavaScript 控制台中也没有发现问题。我在最新的 Safari、Firefox 和 Chrome 中都试过了。

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

4

2 回答 2

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>

此时您只看到旋转木马。除非您添加代码使其滑动，否则它不会做任何事情。您可以使用代码使其自动滑动，也可以按照此处的说明简单地添加导航按钮。

于 2013-06-17T07:28:15.050 回答
0

您没有为您的课程添加任何课程，<ul>您必须将该 id 提供给 your <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：我为这个例子添加了外部插件资源。您可以在左侧的“管理资源”下找到它们。

于 2013-02-14T01:18:28.460 回答