-1

我正在尝试使用适用于 mousedown 和 mouseup 事件的按钮制作一个 jquery 缩略图滚动器。我可以进行滚动，但是当我尝试从中创建一个功能以再次使用它时，它不起作用。这是我的滚动条代码

                var $wrapper = $('.my_ul');
                var $div = $('.my_div');
                var $ul = $('.my_ul');


                    function scrollRight()
                    {


                        var divLeft = $ul.css('marginLeft');
                        divLeft = Math.abs(parseInt(divLeft)) - 60;


                        var width = $div.width();
                        var ulwid = $ul.width();

                        var ulWidth = $ul.width() - width;
                        if(divLeft >= ulWidth){stopScrolling();}
                        else{
                        // contintually increase scroll position*/
                        $wrapper.animate({'margin-left' : '-=10'}, 1, scrollRight);}

                    }

                    function scrollLeft()
                    {   
                        var divLeft = $ul.css('marginLeft');
                        divLeft = parseInt(divLeft);


                        if(divLeft >= 0){stopScrolling();}
                        else{
                        // contintually increase scroll position*/
                        $wrapper.animate({'margin-left' : '+=10'}, 1, scrollLeft);}

                    }

                    function stopScrolling()
                    {
                        // stop increasing scroll position
                        $wrapper.stop();
                    }

                    $('.scroll_right').mousedown(scrollRight).mouseup(stopScrolling);
                    $('.scroll_left').mousedown(scrollLeft).mouseup(stopScrolling);

我需要使用参数创建一个函数，但是当我尝试这样做时，它不起作用。此外，由于递归调用，动画变慢了。如果有人有更好的解决方案，请告诉我。

4

2 回答 2

1

这会以两倍的速度移动：

 $wrapper.animate({'margin-left' : '+=20'}, 1, scrollLeft);}

我会用一点延迟。这是 1/60 秒：

$wrapper.animate({'margin-left' : '+=10'}, 16, scrollLeft);}

我还认为您可以将这部分移出函数而不调用 jQuery 两次。它在滚动期间甚至在加载 div 和 ul 之后都不会改变：

var width = $div.width();
var ulwid = $ul.width();
var ulWidth = ulwid - width;
于 2013-08-08T21:12:28.463 回答
1

这应该有效：

function scrollingStuff($right, $left, $wrapper, $div, $ul) {

    $right.mousedown(scrollRight).mouseup(stopScrolling);
    $left.mousedown(scrollLeft).mouseup(stopScrolling);

    ... put functions here ...

}

使用元素的 jQuery 选择器的结果调用它。

scrollingStuff($(".scroll_right"), $(".scroll_left"), ...);
于 2013-08-08T21:28:15.293 回答