在最后一张图像出现后如何停止图像？

Question

我已经创建了具有2个按钮的图像滑块，下一个和上一个，这些按钮正确正常工作，就像最后一个图像滑块停止时一样，但是借助鼠标问题滑动图像滑块的原因是，滑块会继续滑动到左和右并带有空白空间。

JavaScript：-

var leftFrom = 10;
var scrollPosition = 0;
var scrollOffSet = 400;
$(document).ready(function () {
    function PhotoGallery() {



        $('#thumbs_container').css('width', '100%');
        $('#thumbs_container').css('position', 'absolute');
        $('#thumbs_container').css('overflow-y', 'hidden');
        //$('#thumbs_container').css('left', '1.9%')

        $('#thumbs_container').css('float', 'left');
        $('#thumbs_container').css('height', '215px')

// 我已经动态创建了图像滑块：-

        //var container = document.getElementById('thumbs_container');
        var buttoncontainer = document.getElementById('inner');

        var nextButton = document.createElement('button');
        nextButton.className = 'next';
        nextButton.innerHTML = '❯';
        //container.appendChild(nextButton);
        buttoncontainer.appendChild(nextButton);

//下一步按钮功能：-

        var next = function () {
            console.log("Next Clicked" + " " + $('#thumbs_container').width());
            if ((scrollPosition + scrollOffSet) < $('#thumbs_container').width()) {
                scrollPosition = scrollPosition + scrollOffSet;
                $('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
            }
            else {
                if ((scrollPosition + scrollOffSet) > $('#thumbs_container').width())
                    scrollPosition = scrollPosition + scrollOffSet;
                $('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
            }

        }

//以前的按钮功能：-

        var prevButton = document.createElement('button');
        prevButton.className = 'previous';
        prevButton.innerHTML = '❮';
        //container.appendChild(prevButton);
        buttoncontainer.appendChild(prevButton);




        var previous = function ()
        {
            console.log('Clicked Left');
            var leftOffSet = $('#thumbs_container').scrollLeft();
            console.log("leftOffset" + " " + leftOffSet);
            if ((leftOffSet - scrollOffSet) > 0) {
                scrollPosition = scrollPosition - scrollOffSet;
               $('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
            } else {
                if (leftOffSet > 0)
                    $('#thumbs_container').animate({ scrollLeft: 0 }, 750);
            }
        }

//将图像动态添加到滑块：-

        this.imagecreate = function (name, src) {
            var container = document.getElementById('thumbs_container');


            var img = document.createElement('img');
            img.src = src;
            img.alt = name;
            img.className = 'thumb';
            img.style.width = '300px';
            img.style.height = '150px';
            img.style.position = 'absolute';
            img.style.left = leftFrom + 'px';
            leftFrom = leftFrom + 310;

            container.appendChild(img);
        }

//将视频动态添加到滑块：-

        this.videocreate = function (src, type) {
            var container = document.getElementById('thumbs_container');
            var video = document.createElement('video');
            var source = document.createElement('source');
            source.src = src;
            source.type = type;
            video.autoplay = true;
            video.loop = true;
            video.controls = false;
            video.style.display = 'inline-block';
            video.style.width = '260px';
            video.style.height = '260px';
            video.style.position = 'absolute';
            video.style.top = '-41px';
            video.style.left = leftFrom + 'px';
            leftFrom = leftFrom + 270;
            video.appendChild(source);

            container.appendChild(video);
        }

        nextButton.addEventListener('click', next);
        prevButton.addEventListener('click', previous);
}

    var photoGallery = new PhotoGallery();
    photoGallery.imagecreate('1', 'img/1.jpg');
    photoGallery.imagecreate('2', 'img/2.jpg');
    photoGallery.imagecreate('3', 'img/3.jpg');
    photoGallery.imagecreate('4', 'img/4.jpg');
   // photoGallery.videocreate('img/mcvideo.mp4', 'video/mp4'); 
    photoGallery.imagecreate('5', 'img/5.jpg');
    photoGallery.imagecreate('6', 'img/6.jpg');
    photoGallery.imagecreate('7', 'img/7.jpg');
    photoGallery.imagecreate('8', 'img/8.jpg');
    //photoGallery.videocreate('img/SampleVideo_640x360_1mb.mp4', 'video/mp4');
    photoGallery.imagecreate('9', 'img/9.jpg');
    photoGallery.imagecreate('10', 'img/10.jpg');
    photoGallery.imagecreate('11', 'img/006.jpg');
   // photoGallery.videocreate('img/small.mp4', 'video/mp4');
    photoGallery.imagecreate('12', 'img/007.jpg');

//鼠标滑动功能：-

    var sliding;
    var dir;
    var startClientX = 0;

    $mainDiv = $('#thumbs_container');

    function move(dir) {
        var img = $mainDiv.find('img');
        imgWidth = img.width();

        //var video = $mainDiv.find('video');
        //videoWidth = video.width();

        var total = dir * imgWidth;

        img.animate({ left: '+=' + (total) }, 750);



        //video.animate( { left: '+=' + (dir * videoWidth) }, 200);

    }

    $mainDiv.mousedown(function (event) {
        sliding = true;
        startClientX = event.clientX;
        return false;
    }).mouseup(function (event) {
        var step = event.clientX - startClientX,
            dir = step > 0 ? 1 : -1;

        step = Math.abs(step);

        move(dir);

    });

CSS：-

#thumbs_container {

    width: 100%; /*width:400px;*/
    padding: 14px 40px; /*Gives room for arrow buttons*/
    box-sizing: border-box;
    position: relative;
    background-color: red;
    -webkit-user-select: none;
    user-select: none;
    /*max-width: 1600px;
    max-height: 600px;*/
    overflow:hidden;
}


.inner {
    width: 95%;
    padding: 14px 40px;
    box-sizing: border-box;
    position: relative;
    background-color: yellow;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
}


.thumb{
    margin-right: 1px;
}

button{position: fixed;
    top: 40%;
    z-index: 99999;
    left: 50%;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    height: 30px;
    width: 30px;
    line-height: 30px;}

.previous {
    background-color: #4CAF50;
    border: none;
    color: white;

    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    position: fixed;
    margin-left: -33px;
    top: 7%;
    left: 2%;
}

.next {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 2px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    position: fixed;
    left: 98%;
    top: 7%;
}

.round {
    border-radius: 50%;
}

HTML：-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DynamicSlider</title>
    <!--<link href="css/thumbs2.css" rel="stylesheet" />
    <link href="css/thumbnail-slider.css" rel="stylesheet" />
    <script src="js/thumbnail-slider.js" type="text/javascript"></script>

    <script src="js/readImages.js"></script>-->
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>-->
    <script src="js/jquery1.6.2.js"></script>
    <script src="js/jquery-1.7.1.min.js"></script>
    <link href="css/DynamicSlider.css" rel="stylesheet" />
    <script src="js/DynamicSlider.js"></script>





</head>


<body>
    <div id='thumbs_container'>
    </div>
    <div id="inner">
    </div>

</body>


</html>