javascript - 为什么动画在我的 slider 中不能正常工作？

Question

我有一个 jQuery 简单 slider ，它有 15 张图片，每张幻灯片显示五张图片。我有一个上一个按钮和一个下一个按钮。

每次下一次点击都会向左移动 855px 并带有 slider 动画。 之前的每次点击都会生成一个右移 855px 的 slider 动画。

这是我的 jQuery 代码:

$(document).ready(function(){
    $(".prev_button").click(function(){
        $("ul.slider").animate({
            left: "+=855"
        }, 3000, function(){
            $("ul.slider").css('left', '0');
            li_no = 0;
            $("ul.slider").find("li").each(function(){
                li_no = li_no + 1;
            });
            slide_after_this = li_no - 6;
            $('ul.slider li:gt('+slide_after_this+')').prependTo('ul.slider'); // << line changed
        });
    });

    $(".next_button").click(function(){
        //alert($("ul.slider").css("right"));
        $("ul.slider").animate({
            right: "+=855"
        }, 3000, function(){
        //alert($("ul.slider").css("right"));
            $("ul.slider").css('right', '0');
            $('ul.slider li:not(:nth-child(n+6))').appendTo('ul.slider');
        });
    });
});

现在我有两个问题:

第一个是上一个按钮(向左箭头)当我单击它时，动画显示并且元素发生变化但它们没有相互包裹(我的意思是不会在第一个元素之前立即显示最后一个元素)。我找不到原因。

第二个问题是左右箭头，如下所示:

如果我只单击右箭头， slider 工作正常，它会动画并更改元素，但如果我按顺序单击两个按钮(我的意思是先右后左或左后右)，元素会更改但动画不会显示。但我通过一些警报检查例程是否进入动画功能内部，它进入内部但不在屏幕上动画。

这是一个可能对您有帮助的链接:

http://jsfiddle.net/mpx83tpv/18/

Answer 1

你真的很接近 overflow:hidden 尝试 .slider_container

div.slider_container
{
    height:380px;
    width:855px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
}

编辑js:

也可以使用下面的代码，因为您最终同时使用左右两个 slider ，其中一个始终为零。

$(document).ready(function(){
    $(".prev_button").click(function(){
        $("ul.slider").animate({
            left: "+=855"
        }, 3000);
    });

    $(".next_button").click(function(){
        //alert($("ul.slider").css("right"));
        $("ul.slider").animate({
            left: "-=855"
        }, 3000);
    });
});

如果你想要无限滚动你需要在这种情况下使用右和左替换你的 $("ul.slider").css('right', '0'); 线到$("ul.slider").css('right', ''); 也对左侧执行相同操作，因为您需要删除它们。

为了添加下一个可见的 div，在动画之前实现你的逻辑，因为你在动画之后回调。

棘手的部分是计算 div 计数后的上一个按钮，您还需要设置新的没有动画的左侧，然后调用左侧移动动画。

希望这些是有意义的。