Question

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

                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);

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

Answer 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;

Answer 2

这应该有效：

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"), ...);

Jquery缩略图滚动按钮

2 个答案: