jquery - 我怎样才能在 jcarousel 中获得可见的中间 li？

Question

我有这种情况。中间的两个东西总是比其他的大，不知道怎么弄。
我正在使用 jcarousel。如果有另一个替代 jquery 插件，它将受到欢迎。

Answer 1

笏 jQuery 替代品 ;) 它非常简单但有效

http://codepen.io/dmi3y/full/dCvkl

好的例子在codepen上，它的核心是片段

(function(){
    $('.scroll-gal').each(function(){
        var el = $(this), ul = $('ul', el);
        $('div', el).not('.vewport').click(function(){
            if(ul.is(':animated')) return;
            var dly = 200, first = $('li:first', ul), last = $('li:last', ul);
            switch($(this).css('float')){
            case 'left':
                ul.css('left', -last.outerWidth(true)).prepend(last).animate({'left': 0}, dly);
            break;
            case 'right':
                ul.animate({'left': -first.outerWidth(true)}, dly, function(){
                    $(this).append(first).css('left', 0)
                });
            break;
            }
        });
    });
})();

核心思想只是在繁重的 DOM 操作中，我需要稍微解释一下。

好的，当您单击右键时发生了什么：

ul.animate({'left': -first.outerWidth(true)}, dly, function(){
    $(this).append(first).css('left', 0)
});

首先将整个ul容器动画向右，并在动画结束时将第一项放入列表中，将其放在最后。这很容易。

左动画有点棘手：

ul.css('left', -last.outerWidth(true)).prepend(last).animate({'left': 0}, dly);

在第一点，ul容器向右（负向左）快速移动，然后立即取出最后一个项目并将其放在第一位，然后在这个动画之后向左移动。

你看，引擎盖下有这么多的电话，这就是为什么它很重。但它会在大多数实现中顺利运行，尽管它具有巨大的优化潜力。