滚动库中的下一个和上一个按钮出现错误

我正在为我的网站开发一个水平卷轴画廊。到目前为止,我的滚动功能可以很好地处理全屏、可变宽度的图像。

我一直想实现的下一件事是在图像之间滑动的next/prev按钮。我在这里找到了一篇文章,展示了jQuery的解决方案( fiddle )我已经成功地将其实现到我的图像中,但问题是下一个按钮只适用于一个图像。

这是我的测试页面,向您展示我的意思: http://blackecho.co.uk/test-scroll/scroll-test(img).html

当我单击“下一步”时,它将滚动到下一个图像,但只工作一次。您必须手动向前滚动一点,按钮才能再次工作。另一件事是,上一个按钮工作正常!

经过大量测试后,我很难找到是什么原因导致了我的更改/添加。

HTML语言

<div class="wrapper">

 <div id="t-scroll_container" >
    <div id="t-scroll">
        <div class="t-pic_wrap"><img src="../assets/a.jpg" class="t-pic"></div>
        <div class="t-pic_wrap"><img src="../assets/8.jpg" class="t-pic"></div>
        <div class="t-pic_wrap"><img src="../assets/a.jpg" class="t-pic"></div>
        <div class="t-pic_wrap"><img src="../assets/b.jpg" class="t-pic"></div>
        <div class="t-pic_wrap"><img src="../assets/d.jpg" class="t-pic"></div>
        <div class="t-pic_wrap"><img src="../assets/c.jpg" class="t-pic"></div>
        <div class="t-pic_wrap"><img src="../assets/e.jpg" class="t-pic"></div>
        <div class="t-pic_wrap"><img src="../assets/10.jpg" class="t-pic"></div>
        <div class="t-pic_wrap"><img src="../assets/9.jpg" class="t-pic"></div>
        <div class="t-pic_wrap"><img src="../assets/1.jpg" class="t-pic"></div>                      
   </div>
 </div>


<div style="position:fixed; bottom:1px;">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>

</div>

CSS公司

#t-scroll_container{
 margin:0px;
 width:100%;
 position:fixed;
 top:0px;
 left:0;
 bottom:50px;
 overflow-x:auto;
 overflow-y:hidden;
}

#t-scroll{
height:100%; 
overflow:auto;
white-space:nowrap;

}

.t-pic_wrap{
height:98%;
white-space:nowrap;
display:inline-block;

}

.t-pic{
height:100%;
padding:0px;
margin:0px;
}

JAVA

var currentElement = $("#t-scroll > div:nth-child(2)");
var onScroll = function () {
//get the current element
var container = $("#t-scroll");
var children = container.children();
var position = 0;
for (var i = 0; i < children.length; i++) {
    var child = $(children[i]);
    var childLeft = container.offset().left < child.offset().left;
    if (childLeft) {
        currentElement = child;
        console.log(currentElement)
        return;
    }
}
}

var scrollToElement = function ($element) {
var container = $("#t-scroll");
var children = container.children();
var width = 0;
for (var i = 0; i < children.length; i++) {
    var child = $(children[i]);
    if (child.get(0) == $element.get(0)) {
        if (i == 0) {
            width = 0;
        }
        container.animate({
            scrollLeft: width
        }, 200);
        onScroll();
    }
    if (child.next().length > 0) {
        //make sure we factor in borders/padding/margin in height
        width += child.next().offset().left - child.offset().left
    } else {
        width += child.width();
    }
}
}

var next = function (e) {
scrollToElement(currentElement);
}

var prev = function (e) {
var container = $("#t-scroll");
if (currentElement.prev().length > 0) {
    if (container.offset().left == currentElement.prev().offset().left) {
        currentElement = currentElement.prev().prev().length > 0 ?    currentElement.prev().prev() : currentElement.prev();
    }
    else {
        currentElement = currentElement.prev();
    }
}
scrollToElement(currentElement);
}

$("#t-scroll").scroll(onScroll);
$("#next").click(next);
$("#prev").click(prev);