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

Question

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

我一直希望实现的下一件事是 next/prev 在图像之间滑动的按钮。我在这里找到了 post，它显示了 jQuery (fiddle) 的解决方案，我已经设法将其实施到我的解决方案中，但问题是下一个按钮仅适用于一个图像。

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

当我点击下一步时，它会滚动到下一张图片，但只能使用一次。您必须手动向前滚动一点才能使按钮再次起作用。另一件事是上一个按钮工作正常！

经过大量测试后，我正在努力寻找 changed/added 是什么让它停止工作。

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

Answer 1

简单的答案是 - 您在下一个函数中没有更改 currentElement。当您再次单击时 - currentElement 是相同的。

Answer 2

是的，您的 css 文件有问题：

如果您要删除

font-family: 'Josefin Sans', Geosans Light, sans-serif;

行 - 一切正常。至少，它在这里工作正常（我评论了 css 行）：

http://jsfiddle.net/nPF6F/29/

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

Bug in next and previous buttons in scroll gallery

css

jquery

scroll

gallery