Question

我正在为我的网站制作幻灯片。我试图让一个人用箭头和东西工作。但我想从简单开始。我认为它与jquery有关，但我不确定。图像只是用于测试。我从reallysimpleworks获得了滑块，所以这就是我到目前为止所拥有的：

编辑：答案中建议的内容。在文本中添加了我的滑块源。

<!DOCTYPE html>
<html>
<style>
.rs-slideshow {
    border: 12px solid #444;
    height: 240px;
    margin: 24px auto;
    overflow: hidden;
    position: relative;
    width: 620px;
}

.rs-slideshow .slide-container {
    background-color: #444;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}

.rs-slideshow .slide-container img {
    position: absolute;
}

/*    Hide the slide data container    */
.rs-slideshow .slides {
    display: none;
}
</style>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>

<script type="text/javascript">

$(document).ready(function () {
    $('#slideshow-div').rsfSlideshow();
})

</script>

</head>
<body>

<div id="slideshow-div" class="rs-slideshow">


    <div class="slide-container">
        <img src="http://integrationalism.files.wordpress.com/2010/08/lol1.jpg"
            alt="The first image in a slideshow demo." title="This is the first slide" />
    </div>

    <ol class="slides">
        <li>
            <a href="<--The same as above but due to the fact that i can only post 2 links i added this text-->"</a>
        </li>
        <li>
            <a href="<--The same as above but due to the fact that i can only post 2 links i added this text-->"</a>
        </li>
        <li>
            <a href="<--The same as above but due to the fact that i can only post 2 links i added this text-->"</a>
        </li>
    </ol>

</div>

</body>
</html>

Answer 1

您的脚本部分不正确。它必须是这样的：

<script type="text/javascript" src="js/jquery.rs.slideshow.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {
    $('#slideshow-div').rsfSlideshow();
})

</script>

您需要下载jquery.rs.slideshow.min.js并将其保存在项目文件夹中。

我无法让我的HTML编码幻灯片显示工作

1 个答案: