jquery - 自动滚动 div 溢出内容

Question

我有一个 800 像素 x 150 像素的 div，然后在其中有一些其他 div。外部隐藏了溢出，因此您无法看到超出外部 div 的内容。但我希望用户能够水平滚动以查看更多内容。另外，我希望运行一个 jquery 脚本，如果他们不滚动它，它将自动滚动。
像这样的东西：

<div id="mask" style="width: 800px; height: 150px; position: relative; overflow: hidden;">
<div id="inside-content"><img src="images/thing.jpg"></div>
<div id="inside-content"><img src="images/thing.jpg"></div>
<div id="inside-content"><img src="images/thing.jpg"></div>
</div>

欢迎任何关于如何做到这一点的想法，在此先感谢！

Answer 1

使用 overflow-x 和 overflow-y 来提供不同的滚动/隐藏行为，而不是简写的溢出 CSS 属性并浮动你的内部内容。（并且不要在文档中的任何地方使用多个 ID，而是使用类）。

见 JS-Fiddle

HTML：

<div id="mask">
    <div class="inner">
        <div class="inside-content">
            <img src="http://lorempixel.com/800/150/city" alt="" />
        </div>
        <div class="inside-content">
            <img src="http://lorempixel.com/800/150/sport" alt="" />
        </div>
        <div class="inside-content">
            <img src="http://lorempixel.com/800/150/people" alt="" />
        </div>
    </div>
</div>

CSS：

#mask {
    width: 800px;
    height: 150px;
    overflow-x: auto;
    overflow-y: hidden;
}

.inner {
    width: 2400px; /* 3 times mask */
}

.inside-content {
    float: left;
}