jQuery旋转木马不重复

我正在尝试为我的站点创建一个旋转木马，但在将幻灯片移到列表的后面时遇到了问题，因此它是一个没有空白的连续流。代码如下：

<div class="maskleft"></div>
<div class="maskright"></div>

<div class="slideshow">
    <div class="views-row views-row-1 views-row-odd views-row-first">
        <div class="panel-text">text</div>  
        <div class="views-field views-field-field-image-feature">
            <img typeof="foaf:Image" src="" alt="" />
        </div> 
        <img typeof="foaf:Image" src="" alt="" />
    </div>

    <div class="views-row views-row-2 views-row-even">
        <div class="panel-text">text</div>  
        <div class="views-field views-field-field-image-feature">
            <img typeof="foaf:Image" src="" alt="" />
        </div> 
        <img typeof="foaf:Image" src="" alt="" />
    </div>

    <div class="views-row views-row-3 views-row-odd">
        <div class="panel-text">text</div>  
        <div class="views-field views-field-field-image-feature">
            <img typeof="foaf:Image" src="" alt="" />
        </div> 
        <img typeof="foaf:Image" src="" alt="" />
    </div>

    <div class="views-row views-row-4 views-row-even views-row-last">
        <div class="panel-text">text</div>  
        <div class="views-field views-field-field-image-feature">
            <img typeof="foaf:Image" src="" alt="" />
        </div> 
        <img typeof="foaf:Image" src="" alt="" />
    </div>
</div>

live dev站点位于以下位置：

您只有一个div which正在移动，为什么需要此代码：

var $next = $slider.next().length ? $slider.next() : $('.slideshow'); 

当您到达幻灯片放映结束时，您需要重置marginLeft样式：

if (... check the end of slideshow ...) { // could be calculation of the widht, count of slides, etc.
    $slider.css({marginLeft: '0'});
}

---

如果我没弄错的话，您希望将第一张幻灯片附加到幻灯片放映的末尾，这样您就有了一个恒定的流，而不是跳转到开始处。 假设这是正确的，我们发现了一个重要的关键字：append

您必须实际拍摄第一张幻灯片并将其附加到最后一张幻灯片。通过每个动画步骤执行此操作。我们的结局是这样的

function slideChange() {
    var $slider = $('.slideshow');
    var $first = $slider.first();

    $slider.append($first); // Append a copy of the first slide to the last one
    $slider.animate({marginLeft: '-=1024'}, 1000, function() {
        $first.remove(); // Remove the first slide we just copied. So we virtually swapped the slide from the first to the last place
        $slider.css({marginLeft: '+=1024'}); // Reset the margin
    });

}

此解决方案未经测试，但应能奏效。 但我仍然看到您的代码中存在一些问题

是否仅对此滑块使用此功能？如果您的答案是“是”，您应该明确地为滑块提供id，而不是.class选择器。而且，由于您不会在任何地方再次使用您的函数，因此不需要公开访问的函数。你可以匿名制作，这样可以节省一些资源

setInterval(function() {
    /* Your stuff goes here */
}, 5000);

---

我认为他试图做到以下几点：大写表示可见A b c | A->b c | A b c | A b->c | A b c | b c->A | A b c |等等。您的解决方案将跳回开始，而不进行良好的过渡。不，我的意思是，他需要在良好的过渡之前向后移动滑块，然后执行动画。我并没有说要替换动画。是的，但当他再次向后移动时，会有一个跳跃切割。不会有从C到a的转换。它只会重置整个幻灯片，而根本没有动画。但是Chris想要一个连续的幻灯片流。嗨，是的，我想在这上面添加其他功能，比如向下滑动主img并隐藏非活动比特，这样正确吗函数slideChange{var$slider=$'.slideshow'；var$first=$slider.first；$slider.append$first；//将第一张幻灯片的副本附加到最后一张$slider。动画{marginLeft:'-=1024'}，1000，函数{$first.remove；//删除我们刚才复制的第一张幻灯片。因此，我们实际上将幻灯片从第一张位置交换到了最后一张位置$slider.css{marginLeft:'+=1024'}；//重置边距}；}setIntervalfunction{slideChange}，5000；'如果滑块的工作方式与此相同，您是否满意？加载需要几秒钟。图像尚未压缩。实际上并非如此。这不会缩放孔页面。

setInterval(function() {
    /* Your stuff goes here */
}, 5000);