Question

我有一个简单的网页，我一直试图使用SlidesJS设置一个滑块。

这是在HTML页面中链接所需文件的方式。

<head>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="js/slides.min.jquery.js"></script>
    <script type="text/javascript" src="js/common.js"></script> <!-- the JS function is in here -->
</head>

我已将 loading.gif 和 pagination.png 放入images文件夹中的图片中。

这是页面的HTML。

<div id="container">
<div id="slider-space">
    <div class="slides-container">
        <div>
            <img src="http://i.imgur.com/kLMCP.png" />
        </div>
        <div>
            <img src="http://i.imgur.com/aX675.png" />
        </div>
        <div>
            <img src="http://i.imgur.com/UyE1g.png" />
        </div>
        <div>
            <img src="http://i.imgur.com/uzc7c.png" />
        </div>
        <div>
            <img src="http://i.imgur.com/Zh8sQ.png" />
        </div>
    </div><!-- end of slides-container -->
</div><!-- end of slider-space -->
</div><!-- end of container -->

这是CSS

#container {
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}

#slider-space {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:10%;
    width:500px;
    height:260px;
    background-color:#F96;    
}

.slides-container img {
    width:500px;
    height:260px;
}

.slides-container div {
    display:block;
    width:500px;
    height:260px;
}

这是JavaScript代码

$(document).ready(function(e) {
    $('#slider-space').slides({
        preload: true,
        preloadImage: '/images/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: false,
        pagination: true
    });
});

但滑块根本没有出现！这些图像只是一个在另一个下面显示，

enter image description here 任何人都可以告诉我，我在这里失踪了什么以及应该采取什么措施来纠正它？

非常感谢。

如果它太混乱了。为了更好地理解，请参阅小提琴here。

编辑：

好的，我明白了。现在滑动工作正常。然而，分页存在轻微问题。应该出现的小圆圈不显示。只有数字。请看下面 enter image description here

我已将 pagination.png 放入我的images文件夹中。有没有办法可以在脚本中设置它的路径？

Answer 1

你的div类应该是“slides_container”而不是“slides-container” - 给它一个镜头。

使用分页编辑以解决您的新问题：您缺少与分页相关联的所有CSS。请查看global.css文件中的“带图片的图片”示例。

您需要以下CSS：

/*
    Pagination
*/

.pagination {
    margin:26px auto 0;
    width:100px;
}

.pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(../img/pagination.png);
    background-position:0 0;
    float:left;
    overflow:hidden;
}

.pagination li.current a {
    background-position:0 -12px;
}

如您所见，您可以在background-image

的.pagination li a属性中设置pagination.png文件的路径

无法让SlidesJS工作

1 个答案: