Question

我尝试使用jquery创建一个简单的轮播的 HTML

<div class="block-13">
<div class="list-wrapper">
    <ul class="list row">
        <li class="col-xs-12">
            <table>
                <tr class="row">
                    <td class="col-xs-8">
                        <div class="item item-1">
                            <div class="text">test1</div>
                        </div>
                    </td>
                    <td class="col-xs-4">
                        <div class="item-name">
                            <div class="text">test11</div>
                        </div>
                    </td>
                </tr>
            </table>
        </li>
        <li class="col-xs-12">
            <table>
                <tr class="row">
                    <td class="col-xs-8">
                        <div class="item item-1">
                            <div class="text">test2</div>
                        </div>
                    </td>
                    <td class="col-xs-4">
                        <div class="item-name">
                            <div class="text">test22</div>
                        </div>
                    </td>
                </tr>
            </table>
        </li>
        <li class="col-xs-12">
            <table>
                <tr class="row">
                    <td class="col-xs-8">
                        <div class="item item-1">
                            <div class="text">test3</div>
                        </div>
                    </td>
                    <td class="col-xs-4">
                        <div class="item-name">
                            <div class="text">test33</div>
                        </div>
                    </td>
                </tr>
            </table>
        </li>
    </ul>
</div>
<div class="show-more next">next</div>
<div class="show-more prev">prev</div>

jQuery

var width = $('.block-13 .list li').width();

function carouselNext() {

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

        var first = $('.block-13 .list li:first-child');
        first.remove();
        $(this).append(first);

        $(this).css({
            right: '-=' + width
        });
    });
}

function carouselPrev() {

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

        var last = $('.block-13 .list li:last-child');
        last.remove();
        $(this).prepend(last);

        $(this).css({
            right: '+=' + width
        });
    });
}

$('.block-13 .show-more.prev').click(function () {
    carouselPrev();
});

$('.block-13 .show-more.next').click(function () {
    carouselNext();
});

http://jsfiddle.net/93PhD/12/

function carouselNext()工作正常，块块移动顺畅。但我无法为function carouselPrev()获得流畅的动画效果。如何让它以正确的方式工作？

Answer 1

在PREV上点击：

.prepend（）：最后一个LI元素
向左踢（-width）滑块
动画

这就是你所需要的：

var $list = $('.block-13 .list');
var width = $("li", $list).width();

function next() {
  $list.animate({left: -width}, 800, function(){
    $(this).css({left:0}).append( $("li:first", $list) );
  });
}
function prev() {
  $list.prepend( $("li:last", $list) ).css({left: -width}).animate({
    left: 0
  }, 800);
} 

$('.show-more').click(function () {
  return $(this).hasClass('prev') ? prev() : next();
});

Answer 2

查看小提琴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 3

只需在function carouselPrev()

中从右到左替换

Updated fiddle

jquery简单的旋转木马动画前面的元素运动

3 个答案: