javascript - 达到最大宽度后如何停止动画

Question

我正在努力制作一个 slider ，当用户将鼠标放在箭头上时它会连续移动。它可以工作，但即使内容已经结束，它也会继续移动。

我怎样才能让它停止，以便在查看完所有幻灯片后禁用前进/后退运动，或者让他们在查看第一张幻灯片时不能后退？

我的代码在下面 - 如果我的代码不好，可以使用其他方法来实现这种类型的 slider 。

            $(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);
            }


            });

这是我的 slider 的 fiddle :http://jsfiddle.net/rYYDv/

Answer 1

您可以使用额外的条件:

向左滑动:

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

向右滑动:

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

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

您可能还应该添加一个额外的 else 以确保正确的最终位置(对于 animate left 属性)。但我想你明白了。

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