Div中具有Javascript的可滚动内容具有溢出：隐藏

Question

我需要在一个很小的空间中显示很多图像缩略图。

我的想法是让3列缩略图的行数不确定。 我计划将这些内容放入一个，然后将其放入一个视口div中。 像这样：

        <div id="viewport" style="width: 300px; height: 300px; overflow: hidden;">
            <div id="content" style="width: 300px; height: 100000px;">
                 Rows of thumbnails go here
            </div>
        </div>
        <a href="javascript:ScrollUp()">Previous</a>
        <a href="javascript:ScrollDown()">Next</a>

如果通过示例来说明我的观点，Autotrader的图像控制正是我要的。

我认为我需要做的是在一段时间内使用javascript更改“内容”的topMargin，以在单击按钮之一时获得滚动效果。

我不太喜欢javascript，也不确定从哪里开始。 有人可以指出我正确的方向吗？

Answer 1

因此，我终于花了30秒的时间来学习jQuery是什么以及如何使用它。

= 0

这是做我想要的动作的简单示例。

您必须下载jQuery才能使其运行。 http://jquery.com/

万一其他人需要这样的东西，我将保留这个问题。

    <script src="../jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#next").toggle(function() {
            $("#content").animate({ marginLeft: '0px'}, 'slow');
            }, function() {
            $("#content").animate({ marginLeft: '-100px' }, 'slow');
            });
        });

    </script>

        <div id="viewport" style="width: 300px; height: 300px; overflow: hidden;">
            <div id="content" style="width: 300px; height: 100000px;">
                 Rows of thumbnails go here
            </div>
        </div>
        <a id="next" href="">Previous</a>
        <a id="prev" href="">Next</a>

如果有更好的方法，请告诉我...。