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.uk/

Answer 1

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

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'});
}

Answer 2

如果我找到了你，你想要将第一张幻灯片附加到幻灯片的末尾，这样你就可以得到一个恒定的流，而不是跳回到开头。假设这是正确的，我们找到了一个重要的关键字：追加。

您必须虚拟拍摄第一张幻灯片并将其附加到最后一张幻灯片。通过每个动画步骤执行此操作。我们最终得到这样的东西。

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

jQuery Carousel没有重复

2 个答案: