Question

我正在构建一个jQuery carouselvery（简单的）。它实际上工作正常，除了当我点击下一张幻灯片时，它只是继续，直到它全部是白色和帧外。所以我不知道的是当幻灯片到达结尾时如何禁用下一个，并在幻灯片处于开始位置时禁用prev：

//Slider
    $('#reviewnext').click(function(){
        $('#slide-container').animate({
            'margin-left':'+=-348px'
        })
    })
    $('#reviewprev').click(function(){
        $('#slide-container').animate({
            'margin-left':'+=348px'
        })
    })

HTML：

<div id="customer-reviews">
    <div id="slide-container">
        <article>
            <p>Bacon ipsum dolor sit amet biltong ball tip corned beef jerky, filet mignon boudin andouille frankfurter. Ribeye prosciutto pig filet mignon bresaola.</p>
        </article>
        <article>
            <p>Bacon ipsum dolor sit amet biltong ball tip corned beef jerky, filet mignon boudin andouille frankfurter. Ribeye prosciutto pig filet mignon bresaola.</p>
        </article>
    </div><!-- End slide-container -->
</div><!-- End customer-reviews' -->

我创建了一个小fiddle

Answer 1

在“当前”article幻灯片检查中添加一个类，如果它是第一个或最后一个：

<强>的JavaScript

$('#reviewnext').click(function(event){
    event.preventDefault();
    var $article = $("article.current");
    if ($article.parent().children().index($article) != $article.parent().children().length-3) {
        $('#slide-container').animate({
            'margin-left':'+=-348px'
        });
        $article.removeClass("current").next().addClass("current");
    }
})
$('#reviewprev').click(function(event){
    event.preventDefault();
    var $article = $("article.current");
    if ($article.parent().children().index($article) != 0) {
        $('#slide-container').animate({
            'margin-left':'+=348px'
        });
        $article.removeClass("current").prev().addClass("current");
    }    
})

jsFiddle Demo

jQuery检查最后一张幻灯片

1 个答案: