0

我对 jQuery 完全陌生，迫切需要帮助设置一个简单的文本幻灯片。

我喜欢simplesli.de的外观，但不知道如何让它工作。没有关于在 HTML 中放置什么以及放置在哪里的说明！是的，网站上有不同类型幻灯片的代码片段，但是当我将文本演示文稿的代码复制并粘贴到我的页面中时，我得到的只是静态内容。

我已经下载了 js 文件并将其放入 js 文件夹并从我的页面链接到该文件夹​​ - 仍然没有任何效果。我真的不明白在这里做什么。我如何让它工作？我该如何设计它？我错过了什么？

----编辑---好的，这是我的 HTML 文件中的代码：

在<head></head>我有以下内容：

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

我下载了 jquery.simpleSlide.js 文件并将其放入我父亲根目录中的 _js 文件夹中。我正在处理的页面位于站点的子目录中，因此链接中的“../”。

然后，我为站点中的一个滑块获取了示例代码，并将其放置在我希望它出现的 HTML 中。现在是：

<div>
    <div class="simpleSlide-window" rel="1">
     <div class="simpleSlide-tray" rel="1">
       <div class="simpleSlide-slide" rel="1" alt="1"> content for slide one </div>
       <div class="simpleSlide-slide" rel="1" alt="2"> content for slide two </div>
       <div class="simpleSlide-slide" rel="1" alt="3"> content for slide three </div>
     </div>
   </div>
</div>

我对此进行了测试，我在页面上得到了三行静态文本。根本没有任何工作。我没有任何类型的幻灯片，没有按钮，没有交互性——只有静态无聊的旧内容。我究竟做错了什么？据我所知，我已经完成了网站指示我做的事情。

我试过把这个加到我的头上......

<script type="text/javascript">  
simpleSlide({
    'status_width': 20,             // Integer. Sets the width of the status slideshow's window element.
    'status_color_inside': '#000',  // String. Sets color of status window element.
    'status_color_outside': '#FFF', // String. Sets color of status tray element.
    'set_speed': 500,               // Integer. Sets speed of all animations. Represented in milliseconds.
    'fullscreen' : 'false',         // String. 'true' sets slide window for full screen. For obvious reasons, cannot work with more than one simpleSlide window per page.
    'swipe' : 'false',              // String. 'true' turns on swipe functionality for touch devices.
    'callback': 'function()'        // String. Sets callback to actuate after simpleSlide initial config.
});

但这也没有什么区别。

我真的可以在这里得到一些帮助，因为我完全感到困惑。如果该站点确实发布了有关如何实施此操作的明确说明，我就不会在这里寻求帮助。

----另一个编辑--- CSS在哪里？

4

1 回答 1

0

麻烦的是，您在 DOM 元素存在之前运行设置代码。您可能只需要延迟 JS 代码，直到 DOM 准备好：

$(function() {
    simpleSlide();
});

另外，请确保您正在加载 jQuery 库；我在您的样本中没有看到任何地方。

更新

工作示例在这里。

于 2012-12-05T21:58:53.860 回答