jquery - Slidesjs插件

Question

我是 jquery 新手。我正在尝试将幻灯片插件添加到我的网站上。我遇到了这个“slidesjs”插件，我尝试将其放入我的页面中，但它似乎不起作用。这是我的代码:

<style type="text/css" media="screen">
        .slides_container {
            width:570px;
            height:270px;
        }
        .slides_container div {
            width:570px;
            height:270px;
            display:block;
        }
    </style>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="Slides/examples/images-with-captions/js/slides.min.jquery.js"></script>

    <script>
        $(function(){
            $("#slides").slides();
        });
    </script>

<div id="text-contents">
        <div class="slides_container">
            <div>
                <img src="http://placehold.it/570x270">
            </div>
            <div>
                <img src="http://placehold.it/570x270">
            </div>
            <div>
                <img src="http://placehold.it/570x270">
            </div>
            <div>
                <img src="http://placehold.it/570x270">
            </div>
        </div>
</div>

我刚刚下载了他们的插件。它位于“幻灯片”文件夹中。我将此文件夹转移到我的 html 文件所在的文件夹内。

Answer 1

您没有 id 为“slides”的元素，因此选择器找不到任何要转换的内容。尝试:

$("#text-contents").slides();

相反。

编辑:如果您只是实现其中一个示例的副本，请确保包含关联的资源。例如，如果您使用 Standard 示例的示例代码，则需要 js、css 和 img 文件夹(及其内容)以获得相同的外观。一旦您了解了示例的设置方式，您就可以(并且应该)将它们替换为您自己的样式和图像。