1

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

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

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

            $(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/

4

2 回答 2

0

我没有足够的积分来评论这篇文章；因此，我在这里写下来-

类似的帖子：如何使 Animate jQuery 方法在 div 末尾停止？

于 2013-09-10T22:44:12.360 回答
0

如果出现以下情况，您可以使用额外的：

对于向左滑动：

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

对于向右滑动：

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

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

您可能还应该添加一个额外的 else 以确保正确的最终位置（对于动画左属性）。但我想你明白了。

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

于 2013-09-10T22:46:41.653 回答