滚动图库

Question

我为我的网站开发了一个水平滚动图库。到目前为止，我已经使用全屏，可变宽度图像处理滚动功能。

接下来我要实现的是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);

Answer 1

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

Answer 2

Yeap，你的css文件有问题：

如果您要删除

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

行 - 一切都应该有效。至少，它在这里工作正常（我评论css行）：

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