javascript - 使用slideUp/slideDown 从最后一张幻灯片到第一张幻灯片

Question

我制作了 slider ，但当它到达最后一张幻灯片并且必须从第一张幻灯片重新开始时，它的表现很奇怪。在到达最后一张幻灯片之前，它会向上滑动，但是当它必须转到第一张幻灯片时，它会向下。它有点怀念第一个。我的意思是 - 它显示了它(甚至向下)，但在我的分页点上，它不会将 class .selected 添加到第一个。之后又恢复正常，直到下一个周期。

为什么会发生这两件事。我尝试更改 if(active_slide.index() == last_slide.index())与 if(active_slide.next().length == 0)/和</； if(active_slide.is(last_slide)) ...这没有帮助。

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

Answer 1

以@yabol的answer为基础，我构建了一个带有滚动图像列表的最小示例

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供玩耍。