Question

我有一个简单的jQuery滑块，它有15张图片，每张幻灯片中有五张。我有一个上一个按钮和下一个按钮。

每次下一次点击都会通过855px生成一个带滑块动画的左移动。每次前一次点击都会通过855px生成一个带滑块动画的右移动。

这是我的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');
        });
    });
});

现在我有两个问题：

第一个是上一个按钮（左箭头）当我点击它时，动画显示并且元素已经改变但是它们没有相互包裹（我的意思是在第一个元素之前不显示最后的元素）。我找不到原因。

第二个问题是右箭头和左箭头都是如下：

如果我单击右箭头滑块正常工作它会动画并更改元素但是如果我按顺序单击两个按钮（我的意思是右边然后左边或左边然后右边），元素会改变，但动画不会显示。但是我检查一下例程是否通过一些警报进入animate函数内部并且它进入内部但没有在屏幕上设置动画。

这是一个可以帮助您的链接：

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：

也使用下面的代码，因为你在最后使用左右两个滑块同时使用它们中的一个始终为零。

$(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计数后的上一个按钮，你还需要设置新的左边没有动画，然后调用左移动画。

希望这些有意义。

为什么动画在我的滑块中无法正常工作？

1 个答案: