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

我已经尝试根据幻灯片（文章）的宽度/数量来计算停止位置，但是我猜想它会变成越野车，我正在寻找能够与我的css响应的流体（显示在小提琴）。有什么建议？：）

Answer 1

希望以下链接可以帮助您。

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论坛的帮助下找到了一个解决方案。如果任何访问者需要知道如何做，决定在此发布：）

完整代码：

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滑块旋转木马停在最后

3 个答案: