Question

我是jQuery的新手，迫切需要帮助设置一个简单的文本幻灯片。

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

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

---- --- EDIT 好的，这是我在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在哪里？

Answer 1

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

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

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

<强>更新

工作示例over here。

如何设置simplesli.de？

1 个答案: