JS Thumb滚动条

Question

我的网站上有一个拇指滚动条，问题是，当拇指到达结束时，滚动条会在它回到开始之前留下空白......任何人都可以帮助如何实现这一点...提前谢谢！

这是网址：http://marinmartinovic.com/MK_test/

加载可能需要一点点。仍然需要优化图像...

这是js：

$(document).ready(function(event) {






/*
 *
 * SORTING INDEX NUMBERS
 *
 */

function sortIndexNumbers(){

    loadPhotoIndex = 0;
    indexNumbers = [];

    for(var i = 0; i<photosLength;i++){
        indexNumbers.push(i);
    }

    if(photoIndex === 0){
        indexNumbersToAdd = indexNumbers.splice(photosLength-1, 1);
        indexNumbers = indexNumbersToAdd.concat(indexNumbers);
    }
    if(photoIndex > 1){
        indexNumbersToAdd = indexNumbers.splice(0, photoIndex -1);
        indexNumbers = indexNumbers.concat(indexNumbersToAdd);
    }

    loadPhoto();
}




/*
 *
 * LOAD THUMBS
 *
 */

var aThumbsWidth = [];

var speedThumb = 750;

var thumbIndex = 0;
var thumbSwiped = 0;
var thumbsWidth = 0;

function loadThumb(){

    $('<img src="'+ aThumbs[thumbIndex] +'">').one('load', function() {

        $(".thumb-content ul").append('<li><div class="thumb" id="thumb" data-index=' + thumbIndex + '><img src="'+ aThumbs[thumbIndex] +'"></div></li>');

        //setTimeout(function() {

            aThumbsWidth.push($('.thumb-content .thumb img').get(thumbIndex).width);    
            thumbsWidth+= $('.thumb-content .thumb img').get(thumbIndex).width + thumbSpacing;

            thumbIndex++;

            if(thumbIndex < aThumbs.length){
                loadThumb();
            }

            // all 3 loaded

            if(thumbIndex === aThumbs.length){

                highlightThumb();
                // find thumb and get its position
                console.log(photoIndex);
                var thumbPosition = $('.thumb-content').find("[data-index='" + photoIndex + "']").position().left;
                selectThumb(thumbPosition);
            }

        //}, 50);

    }).each(function() {
        //if(this.complete) $(this).load();
    });

}


/*
 *
 * SWIPE THUMB SLIDER
 *
 */

var currentThumb = 0;
var currentThumbShift = 0;

$(".thumb-content").swipe( {
    tap:function(event, target) {
        if(!loadingInProgress){
            photoIndex = parseFloat(target.getAttribute('data-index'));
            selectPhoto();
            highlightThumb();
        }
    },

    triggerOnTouchEnd: false,
    swipeStatus: swipeThumbStatus,
    allowPageScroll: "vertical",
    threshold: 200
});

function swipeThumbStatus(event, phase, direction, distance, fingers)
{
    thumbSwiped = distance;

    /*if( phase === "move" && (direction === "left" || direction === "right") )
    {
        var duration = 0;

        if (direction === "left"){
            scrollThumbs(currentThumbShift + distance, duration);
        }

        else if (direction === "right"){
            scrollThumbs(currentThumbShift - distance, duration);
        }

    }

    else if ( phase === "cancel")
    {
        scrollThumbs(currentThumbShift, duration);
    }*/

     if ( phase === "end" ){
        if (direction === "right"){
            if(!loadingInProgress){
                prevPhoto();
                setThreePhotos(prevPhoto, 1500, 1);
            }
        }
        else if (direction === "left"){
            if(!loadingInProgress){
                nextPhoto();
                setThreePhotos(nextPhoto, 1500, 1);
            }
        }
    }

}

function selectThumb(distance){
    currentThumb = currentThumb + photoIndex;
    TweenLite.to($(".thumb-content"), 0.75, {left: -distance, ease:Power4.easeOut, force3D:true});
}

$('body').on('click', '.thumb', function(e) {
    if(!loadingInProgress){
        photoIndex = parseFloat($(this).attr('data-index'));
        selectPhoto();
        highlightThumb();
        selectThumb($(this).position().left);
    }
});

function highlightThumb(){
    $('.thumb').css('opacity', '1');
    $('.thumb-content').find("[data-index='" + photoIndex + "']").css('opacity', '0.5');
}


/*
 *
 * NEXT PREVIOUS THUMB
 *
 */

var arrow = false;

var nextThree ;
var intervalBuffer;

$('#next-thumb').click(function(event) {
    if(!loadingInProgress){

        photoIndex += 2;
        if((photoIndex+1) >= aPhotos.length){
            photoIndex = 0;
        }
        selectPhoto();
        highlightThumb();

        // find thumb and get its position
        var thumbPosition = $('.thumb-content').find("[data-index='" + photoIndex + "']").position().left;
        selectThumb(thumbPosition);

    }
});

$('#prev-thumb').click(function(event) {
    if(!loadingInProgress){
        photoIndex -= 2;
        if((photoIndex+1) < 0){
            photoIndex = aPhotos.length-1;
        }
        selectPhoto();
        highlightThumb();

        // find thumb and get its position
        var thumbPosition = $('.thumb-content').find("[data-index='" + photoIndex + "']").position().left;
        selectThumb(thumbPosition);
    }
});

function setThreePhotos(callback, delay, repetitions) {

    clearInterval(threePhotos);
    var x = 0;
    var threePhotos = setInterval(function () {

       callback();

       if (++x === repetitions) {
           clearInterval(threePhotos);
       }
    }, delay);
}