javascript - 一旦达到最大宽度，如何停止动画

我正在努力制作一个在用户鼠标位于箭头上方时连续移动的滑块。它可以工作，但是即使内容结束，它仍会继续移动。

如何停止播放，以便在查看所有幻灯片后禁用前进/后退动作，或者在查看第一张幻灯片时不能向后移动？

我的代码如下-如果我所拥有的不好，可以使用其他方法来实现这种类型的滑块。

            $(document).ready(function() {
                var timer;

                $("#leftarrow").hover(function() {
                    timer = setInterval(function() {slideLeft();}, 50);
                }, function() {
                    clearInterval(timer);
                });


            $("#rightarrow").hover(function() {
                    timer = setInterval(function() {slideRight();}, 50);
                }, function() {
                    clearInterval(timer);
                });



            function slideLeft() {
                $("img#background").stop().animate({
                    'left': '-=200px'
                }, 50);
                $(".mid").stop().animate({
                    'left': '-=20px'
                }, 50);
                console.log('alert');

            }

            function slideRight() {
                $("img#background").stop().animate({
                    'left': '-=200px'
                }, 50);
                $(".mid").stop().animate({
                    'left': '+=20px'
                }, 50);
            }


            });

这是我的滑块的小提琴：http://jsfiddle.net/rYYDv/

最佳答案

在以下情况下，您可以使用其他功能：

对于左滑：

if(($(".mid").position().left) >= -500){ .. }

对于右滑：

if(($(".mid").position().left) <= -10){ .. }

缺点：您必须手动处理正确的值。如果图片不经常更改，这不是问题。

您可能还应该添加其他其他内容，以确保正确的最终位置（对于动画左属性）。但是我认为你明白了。

http://jsfiddle.net/rYYDv/2/