Question

我正在努力制作一个滑块，当用户鼠标位于箭头上方时，该滑块会持续移动。它有效但即使内容结束也会继续移动。

如何在停止查看所有幻灯片后禁用前进/后退动作，或者在观看第一张幻灯片时无法向后移动？

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

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

Answer 1

我没有足够的观点来评论这篇文章;因此，我在这里写下来 -

类似文章：How to make the Animate jQuery method stop at end of div?

Answer 2

您可以使用额外的if：

左侧幻灯片：

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

右侧幻灯片：

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

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

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

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

如何在达到最大宽度时停止动画

2 个答案: