Question

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

为什么会发生这两件事。我尝试使用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进行游戏。

Answer 2

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

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

2 个答案: