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

Posted 2023-02-25

【中文标题】滚动库中的下一个和上一个按钮中的错误

【英文标题】：Bug in next and previous buttons in scroll gallery

【发布时间】：2016-01-07 19:22:31

【问题描述】：

我正在为我的网站开发一个水平滚动画廊。到目前为止，我的滚动功能适用于全屏、可变宽度的图像。

我一直希望实现的下一件事是在图像之间滑动的下一个/上一个按钮。我在这里找到了一个帖子，显示了一个使用 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);

【参考方案1】：

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

如果你要删除

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

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

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

【讨论】：

它正在工作！我不知道为什么会破坏这种行为，我很想知道你是怎么想出来的。感谢您的帮助！

没问题，@Joe :) 请投票给我的答案，如果我的信息有帮助，请将其设置为解决方案。祝你有美好的一天

【参考方案2】：

简单的答案是 - 您在下一个函数期间没有更改 currentElement。当你再次点击时 - currentElement 是一样的。

【讨论】：

很抱歉我这么无知，但我不是最擅长 jQuery 的。我不是 100% 确定我要更改/添加什么。我感到困惑的主要原因是因为我几乎从另一篇文章中复制了代码（减去 scrollToIndex 函数），但我的代码却没有发挥同样的作用。

jsfiddle.net/nPF6F/27 - 页面的副本，不包括额外的 js 文件引用和 js 代码注入。奇迹般有效。您的附加 js 文件或 js 出现问题。尝试逐部分删除所有其他js和其他代码，您会发现哪些代码破坏了您的行为。

我已经更新了测试页面blackecho.co.uk/test-scroll/scroll-test(img).html，确保所有的java脚本都和你的一样，然后把整个页面删掉，直到它和小提琴中的几乎一样（除了对于我的样式表链接和 jQuery 库的链接），但它仍然坏了。我的其他风格之一会导致问题吗？

我检测到，您的 css 文件中存在问题。如果您将 css 内容更改为 jsfiddle.net/nPF6F/28 - 应该可以。嗯。很奇怪:)