如何在水平滚动页面上创建平滑跳转到部分

Question

我正在为我的摄影业务建立我的作品集网站。我已经建立了网站，因此投资组合水平滚动。

这就是我目前所拥有的。http://www.dscottclarkphoto.com/portfolio/adventure/adventure.html

我希望能够包含箭头，单击时将观看者跳转到下一张照片。

我尝试使用此处演示的内容：jQuery：跳转到下一个<部分>

我将Javascript保存到它自己的名为jump.js的文件中。

<script src="../jquery.js"></script>
<script type="text/javascript" src="../jump.js"></script>
</head>
<div id="images">
 <ul> 
    <li><section id="1"><img src="../space.jpg" /></section></li>
    <li><section id="2"><img src="adventure/adv-01.jpg" /></section></li>
    <li><section id="3"><img src="adventure/adv-02.jpg" /></section></li>
    <li><section id="4"><img src="adventure/adv-03.jpg" /></section></li>
    <li><section id="5"><img src="adventure/adv-04.jpg" /></section></li>
  </ul>

我也尝试保存样本，但它的行为也不正确。

</div>

关于如何使这项工作或更好的方法，有什么建议吗？

Answer 1

我尝试了以下代码。它完全按照您想要的方式工作。

$(function(){
    var currentImage = 1;
    var imagesCount = $('#images li').length - 1;
    var spacerWidth = $('#images li:eq(1)').offset().left;
    $('#scroll').click(function(){
        currentImage++;
        if (currentImage == imagesCount) currentImage = 1;
        var left = $('#images li').eq(currentImage).offset().left;
        $(window).scrollLeft(left - spacerWidth);
    });
});

当您添加适当的滚动按钮时，只需将$('#scroll')更改为其选择器即可。现在它附加到"以这种方式滚动>"文本。

请注意，您不需要添加任何额外的标记，例如<section>或其他标记。

Answer 2

在您

发布的链接中，他们正在使用垂直滚动（$(myEl).offset().top），如果您使用水平滚动，则应将其更改为$(myEl).offset().left。没有尝试过，但应该是这样。此外，与问题无关，但它可能有助于改善页面的外观，您可能希望将图像保存为*.png interlaced这样它们就不会像当前那样滑落。