Javascript 循环jQuery动画问题？

我已经在这个问题上纠结了一段时间，我真的不明白怎样做才是最好的方法

我有两个div（请记住，我可能需要更多）。我希望首先只显示div 1，然后当我按下第一个div上的箭头时，它会向左滑动，然后出现第二个div（从右侧滑入）。我将如何进行循环？我想我可以使用css3，但效果不太好

以下是我到目前为止得到的信息：

这是jQuery，但它只处理一个箭头：

$('.arrow-right').click(function () {  
    // Slide div to left, and slide new from right ... repeat/Loop
    $("#div1").animate({
        left: "-999%"
    }, 1000, function () {
        $("div1").css("block", "none");
        $("div2").animate({
            // Animate Right Div from right to left ... 
        });
    });
});

我已经得到了从左到右的动画，但我只是不明白如何循环这个动画（像一个滑块），并使我的每个div按钮点击

我走对了吗？（我在jQuery方面的经验非常有限，尤其是在动画方面）

谢谢

编辑

这已经接近我想要的了，但是我需要它来循环，并且我希望能够添加内容，而不必太多地修改jQuery。

这将支持任何内容。 小提琴： 你在正确的轨道上。我会尝试设置一些

全局变量
的
宽度
以及您实际需要它来运行的其他变量，而不是像您在示例中所做的那样使用
百分比

这里有一个标准方法的想法：

var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('a.control_prev').click(function () {
    moveLeft();
});

$('a.control_next').click(function () {
    moveRight();
});


设置全局变量以在脚本设置动画时“锁定”脚本

isAnimating = false;

$('.wrapper').on('click', '.arrow-left', function() {
    // Check if the lock is on, if it is, cancel additional clicks
    if(isAnimating) return;

    // Lock the buttons to avoid multiple user-interaction when script is animating
    isAnimating = true;

    // Get the current displayed div and the next div to be animated in
    var $current = $(this).parents('.MovingDiv');
    var $next = $(this).parents('.MovingDiv').next();

    // Animate the current div out
    $current.animate({
        left: "-999%" // Animate to the left
    }, 1000, function() {
        $current.css({
                // This doesn't really do anything important because the start point will be set again the next time the next time it is needed
                left: "999%"
            })
            .appendTo('.wrapper'); // move to end of stack

        // Animate the next div in
        $next.css({
                left: "999%" // set the start point from the right
            }).animate({
                left: "0%" // complete animation in the middle of the page
            }, 1000, function() {
                isAnimating = false; // unlock the script when done
            });
    });

}).on('click', '.arrow-right', function() {
    if(isAnimating) return;

    isAnimating = true;
    var $current = $(this).parents('.MovingDiv');
    var $next = $(this).parents('.MovingDiv').siblings().last();

    $current.animate({
        left: "999%"
    }, 1000, function() {
        $current.css({
            left: "-999%"
        });

        $next.prependTo('.wrapper') // move to front of stack
            .css({
                left: "-999%"
            }).animate({
                left: "0%"
            }, 1000, function() {
                isAnimating = false;
            });
    });
});

将您的CSS更改为：

.MovingDiv:first-child {
    display: block;
}
.MovingDiv {
    display: none;
}

有很多用于滑块的jQuery插件，如果您想学习创建自己的滑块的基本逻辑，还可以阅读大量教程。@ahren谢谢。但这不是一个滑块。Div位于中央屏幕中。像模态，但模态滑出，另一个滑入。我不想要图像/内容滑块的感觉。我不寻找滑块。我想从屏幕上滑下一个div，再从屏幕的右侧滑到中间。看看我的例子。从中间到左边，我需要另一个div从右边到中间。这需要循环，很简单。等一下，这太完美了。非常感谢你。我将确保逐行阅读这篇文章，更好地理解正在发生的事情。有没有办法交换动画？当我按向右键时，div向左移动？等等。啊，好吧，这就是我想的，但是如果我做错了什么，我会把自己弄糊涂的。谢谢你。。。这帮助更大。