Question

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

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

我希望能够包含点击时将箭头跳到下一张照片的箭头。

我尝试使用此处演示的内容： jQuery: jump to next <section>

我将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')更改为其选择器。现在它被附加到“以这种方式滚动＆gt;”文本。

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

Answer 2

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

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

2 个答案: