Question

我正在建立这个网站，我对此页面基本上有两个问题： http://sites.publishyours.com.br/silviamecozzi/pt/obra/deserto_das_palmas.php

在链接上，您会看到一些＆＃34;将会是＆＃34;不同大小的图像及其传说。这些图像中的一些将与1700px +一样宽，这是第一个问题和问题。

检查html和css你会看到一个id为＆＃34; gallery＆＃34;的div这是持有所有图像。它是绝对定位的，我将其宽度设置为4800px（不足以容纳所有浮动到左侧的图像。如果将此宽度更改为5000px，则足以容纳所有图像和一切都应该是好的但是......

问题01：为什么我需要设置div＃gallery width？我还有其他类似图像/尺寸的部分，我无法预测它需要的宽度。我只是希望它能够扩展到需要的范围，如果我需要在以后添加更多图像，我希望它能够根据需要将其推广。

问题02：首先请注意我如何设置＆＃34;画廊的左侧位置＆＃34; div为-150px。好吧，一旦我解决了第一个问题，我可能会设置＆＃39; html＆＃39;标记为{overflow-x：hidden; }。并使用一个水平滚动，它将与网站（+ - 920px）一样宽，在图像的正下方，我希望图像能够从隐藏的右侧滚动（使用jQuery滚动）。喜欢{left：0px;到了隐藏的左边＆＃39;喜欢{left：-3980px;浏览器反之亦然，因为用户使用滚动...这个滚动将需要计算#gallery div的宽度和所有...有人可以指向一个jQuery插件，它将帮助我做到这一点？我正在思考jscrollpane（http://jscrollpane.kelvinluck.com），但我真的不知道它是否会这样做。

感谢您的帮助！

Answer 1

问题1：您可以使用pre或nowrap来阻止包装。只要您的html结构和CSS正确无误，您就不需要设置图库宽度。

问题2：您可以使用jQuery中的scrollLeft属性将元素带入视图。你不需要插件。

http://jsfiddle.net/3Tsfv/1

然后使用scrollLeft属性将下一个元素设置为视图。此示例不处理边框情况，因此如果您单击左/右太多次，它将会中断。您应该很容易根据自己的需要对其进行修改。

CSS

body { white-space:nowrap; overflow: hidden; padding: 10px; }
img { margin: 5px; border: 1px solid black; }
img.active { border-color: orange; }
div{ position: fixed; }

HTML

<div><button id="left"><-</button><button id="right">-></button></div><br /><br />
<img class="active" src="http://placehold.it/500x100/" /><img src="http://placehold.it/750x100/" /><img class="active" src="http://placehold.it/300x100/" /><img class="active" src="http://placehold.it/1000x100/" />

jquery

$('#left').click(function() {
    var $prev = $('.active').prev();
    $('.active').removeClass('active');
    $prev.addClass('active');   
    $('body').animate( { scrollLeft: $prev.offset().left }, 'slow');
});

$('#right').click(function() {
    var $next = $('.active').next();
    $('.active').removeClass('active');
    $next.addClass('active');   
    $('body').animate( { scrollLeft: $next.offset().left }, 'slow');
});

5000px +宽幅水平滚动？

1 个答案: