1

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

这就是我到目前为止所拥有的。 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>

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

4

2 回答 2

0

我尝试了以下代码。它完全按照您的意愿工作。

$(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>的。

于 2012-12-05T21:29:29.260 回答
0

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

于 2012-12-05T21:32:10.033 回答