jquery - 当我单击并按住 fotorama 上的箭头时，如何使图像连续滑动？

Question

我现在正在制作一个 fotorama 画廊，我们想添加这个新功能，当我单击并按住箭头时，图像将连续滚动，直到 mouseup。

我尝试如下，但是滑动运动并不理想：

    const imgnum = 26;  // 26 images on this page 
    function sleep(milliseconds) {
        var start = new Date().getTime();
        for (var i = 0; i < 1e7; i++) {
            if ((new Date().getTime() - start) > milliseconds){
                break;
            }
        }
    }
    //slide function
    function slideNextFast(){ 
        while(parseInt(fotorama.activeIndex) < imgnum){
            fotorama.show(">");
            sleep(100);
        }
    }
    $(document).ready(function(){
        var timeoutId = 0;
        $(".fotorama__arr--next").on("mousedown", function(){
        timeoutId = setTimeout(slideNextFast, 500);
        }).on("mouseup mouseleave", function(){
        clearTimeout(timeoutId);
        });
    });

HTML是这样的：

<div id="fotorama" class="fotorama" data-width="700" data-width="700" data-ratio="700/467" data-fit="cover" data-max-width="100%" data-nav="thumbs" data-arrows="always" data-click="false" data-swipe="false" data-auto="false" data-hash="true" data-thumbwidth="110" data-thumbheight="85">
    <div data-thumb="pictures/na1.jpeg">                    
        <div id="map-canvas" data-fit="contain"></div>
    </div>
    <div data-img="mturn/coolidgehwy.jpg" data-caption="One">
        <a href="http://www.google.com/maps/@?api=1&map_action=map&basemap=satellite&zoom=19&center=42.543214,-83.186111" target="_blank" data-fit="contain"></a>
    </div>
    <div data-img="mturn/northwesternhwy.mi.jpg">
        <a href="http://www.google.com/maps/@?api=1&map_action=map&basemap=satellite&zoom=19&center=42.500573,-83.308173" target="_blank" data-fit="contain"></a>
    </div>
    <div data-img="mturn/rt29.universityblvd.md.jpg">
        <a href="http://www.google.com/maps/@?api=1&map_action=map&basemap=satellite&zoom=19&center=39.020215,-77.012860" target="_blank" data-fit="contain"></a>
    </div>

问题是我真的不知道如何改进 slideNextFast()。

标签： jqueryfotorama