jQuery 滑块轮播停止

Question

好的。我正在使用一些简单的 javascript 和 css3 构建自定义轮播。到目前为止一切正常。然而。当我继续单击下一个按钮时（当滑块结束时），它继续没有停止功能（所以一切都会变得模糊和混乱）。 I have created a small fiddle

所有相关代码已精简为以下内容：

function nextSlide(){
    counter++;
    var slideWidth = articleWidth*counter;
    var articles = $('#slider article.boxed').length;
    //Magic with css3
    $('.carousel>div').css('-webkit-transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
    $('.carousel>div').css('-ms-transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
    $('.carousel>div').css('transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
}

我已经尝试根据幻灯片（文章）的 width/number 来计算停止位置，但我想它会出现问题，我正在寻找可以与我的 css响应式（显示在fiddle）。有什么建议么？ :)

Answer 1

希望以下link对您有所帮助。

http://jsfiddle.net/YFgAM/

$('.block-13 .show-more.prev').click(function () {
var last = $('.block-13 .list li:last-child');
last.remove();
$('.block-13 .list').filter(':not(:animated)').prepend(last);

$('.block-13 .list').filter(':not(:animated)').css({
    right: '+=' + width
});

$('.block-13 .list').filter(':not(:animated)').animate({
    right: '-=' + width
});

});

Answer 2

在你的 nextSlide 函数中你可以这样做：

function nextSlide(){
    if (counter + 1 == $('.carousel > div > article').length) {
        return;
    }

    counter++;

    //--------
}

Updated jsfiddle

Answer 3

我在 jQuery 论坛的帮助下找到了解决方案。决定 post 如果任何访问者需要知道如何做，就在这里 :)

完整代码：

var counter         = 0,
    articleWidth    = 350, //Fixed width of articles, divs etc
    articles = $('#slider article.boxed').length;//Length of articles, divs etc.

function nextSlide(){
        var va = Math.floor($('.carousel').width() / articleWidth)+1;
        if (counter < articles - va) {
            counter++;
            var slideWidth = articleWidth*counter;
            //Magic with css3
            $('.carousel>div').css('-webkit-transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
            $('.carousel>div').css('-ms-transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
            $('.carousel>div').css('transform', 'translate3d('+-slideWidth+'px, 0px, 0px)');
        }
    }

jQuery 滑块轮播停止

jQuery slider carousel stop at end

jquery

slide

carousel