0

我制作了我的滑块，但是当它到达最后一张幻灯片并且必须从第一张开始重新开始时，它的表现很奇怪。在到达最后一张幻灯片之前，它会向上滑动，但当它必须到达第一个幻灯片时，它会向下滑动。它有点错过第一个。我的意思是 - 它显示它（甚至向下），但在我的分页点上它不会将 class .selected 添加到第一个。之后，它会再次正常运行，直到下一个周期。

为什么会发生这两件事。我试图if(active_slide.index() == last_slide.index())用if(active_slide.next().length == 0)/and </;改变 if(active_slide.is(last_slide))......它没有帮助。

这是 jsfiddle http://jsbin.com/iwiroq/4/edit。

4

2 回答 2

2

基于@yabol 的回答，我构建了一个带有滚动图像列表的最小示例

HTML：

<div class="image-slider">
    <ul>
        <li><img src="http://lorempixel.com/400/200/sports" alt="" /></li>
        <li><img src="http://lorempixel.com/400/200/food" alt="" /></li>
        <li><img src="http://lorempixel.com/400/200/city" alt="" /></li>
        <li><img src="http://lorempixel.com/400/200/nature" alt="" /></li>
    </ul>
</div>

JS：

var image_list = $('.image-slider li');
image_list.hide();
var first_child = '.image-slider li:first-child';
var last_slide = $('.image-slider li:last-child');
var last_index = last_slide.index();
var active_slide = $(first_child);
active_slide.show();
setInterval(next, 5000);

function next(){
    active_slide.slideUp();
    if (active_slide.index() >= last_index)
        $(first_child).insertAfter(active_slide);

    active_slide = active_slide.next();
    active_slide.slideDown();
}

JSFiddle或Tinker用于播放。

于 2013-01-25T12:01:46.390 回答
0

它向下而不是向上滑动的原因是因为列表的第一个元素在 dom 树中高于最后一个元素。您可以通过添加第一个元素也作为最后一个元素来解决它，并且最后一个元素被加载，您首先将其交换。

于 2013-01-25T10:13:32.940 回答