使用 jQuery 按下一个或上一个按钮时如何为这个轮播（ul li）设置动画？答案

【问题标题】：How animate this carousel (ul li) when press next or previous button with jQuery?使用 jQuery 按下一个或上一个按钮时如何为这个轮播（ul li）设置动画？
【发布时间】：2019-07-30 07:58:15
【问题描述】：

当按下两个按钮之一（下一个，上一个）时，我需要轮播的元素来制作动画，因为它们向右或向左移动并输入新元素。

问题是我不知道如何开始为轮播设置动画。

我有一个JSfiddle

(function($) {
    $.fn.scrollList = function(numVisibleItems) {
        var visibleItems = numVisibleItems.visibleItems;
        var $carousel = $(this);
        var $slideItems = $("li", this);
        var $firstItem;

        var setCurrentItems = function() {
            $slideItems.hide();
            $('.current-scroll-list', $carousel).removeClass('current-scroll-list');
            $currentItems = $("li:nth-child(-n+" + visibleItems + ")", $carousel);
            $currentItems.addClass('current-scroll-list').show();
        }

        var nextItem = function() {
            $firstItem = $("li:nth-child(-n+" + visibleItems + ")", $carousel);
            $carousel.append($firstItem);
            setCurrentItems();
        }

        var previousItem = function() {
            $lastItem = $("li:nth-last-child(-n+" + visibleItems + ")", $carousel);
            $carousel.prepend($lastItem);
            setCurrentItems();
        }

        function addArrows() {
            if ($slideItems.length > visibleItems) {
                if ($($carousel).parent().find(".next").length == 0 && $($carousel).parent().find(".previous").length == 0) {
                    $carousel.parent().append('<span class="carousel-btn previous">&#10148;</span>');
                    $carousel.parent().append('<span class="carousel-btn next">&#10148;</span>');
                }
                $($carousel).siblings(".next").click(nextItem);
                $($carousel).siblings(".previous").click(previousItem);
            }
        }

        setCurrentItems();
        addArrows();
    };
})(jQuery);

$(document).ready(function() {
    $(".num-list").scrollList({
        visibleItems: $(".num-list").data("numitems")
    });
});

现在，当您按下两个按钮之一时，轮播会在没有动画的情况下传递到下一个项目，我需要知道如何在没有插件的情况下为其设置动画。

我需要像this plugin 这样的东西。

编辑

HTML：

<div class="wrap gradient_bg">
    <ul class="list-4 num-list" data-numitems="4">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</div>

CSS：

.carousel-btn{
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    padding: 0.5em;
    z-index: 1;
    top: 5px;
    cursor: pointer;
}
.carousel-btn.previous{
    left: 0;
    padding-right: 2em;
    transform: rotate(180deg);
    top: 7px;
}
.carousel-btn.next{
    right: 0;
    padding-left: 2em;
}

ul{
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
}

【问题讨论】：

好的，你的问题是什么？你也可以添加你的 HTML/CSS 吗？并提供 JSfiddle 或 sn-p 也可以提供帮助
@MickaëlLeger，JSfiddle 是 this: jsfiddle.net/loboomg/ebrt38df

标签： jquery animation carousel

【解决方案1】：

JSfiddle

CSS flexbox 不是这种轮播的最佳解决方案，因此我已将其删除，并且您的项目也不需要隐藏，因为包装溢出不可见，所以请记住，我已经稍微更改了 CSS .

这是工作的 jsfiddle：https://jsfiddle.net/lakialekscs/2ezvyx57/

这是动画解决方案。将 ul 元素向左移动，动画完成后重置位置并显示下一张幻灯片。这是一个粗略的代码，但您可以从这里获取并使它变得漂亮。

       $('ul').animate({
         left: $('ul').position().left - $('ul').width() + "px"
       }, 200, function() {
         $('ul').css({
            "left": "auto",
            "right": "auto"
         });
       });

【讨论】：