jQuery 轮播不重复

Question

我正在尝试为我的网站创建一个轮播，但无法将幻灯片移动到列表的后面，因此它是一个连续的流，没有空白。代码如下：

<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>

jQuery 是：

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

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

    $next.animate({marginLeft: '-=1024'}, 1000, function() {
    });
}

$(document).ready(function() {
    setInterval( "slideChange()", 5000 );
});

实时开发站点在这里：http://dev.shoeboxdesign.co。英国/

Answer 1

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

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

2. 当你到达幻灯片结尾：

   if (... check the end of Slideshow ...) { // 可以计算宽度、幻灯片数量等。
       $slider.css({marginLeft: '0'});
   }
   

Answer 2

如果我的理解是对的，您希望将第一张幻灯片附加到幻灯片的末尾，这样您就有一个恒定的流，而不是跳回到开头。
假设这是正确的，我们发现了一个重要的关键字：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);