Jquery 自动滚动div溢出内容

Jquery 自动滚动div溢出内容,jquery,scroll,overflow,hidden,Jquery,Scroll,Overflow,Hidden,我有一个800像素乘以150像素的div,还有一些其他div在里面。外部分区隐藏了溢出,因此您无法看到超出外部分区的内容。但我希望用户能够水平滚动它以查看更多内容。另外,我希望有一个jquery脚本运行,如果没有滚动,它将自动滚动。 大概是这样的: <div id="mask" style="width: 800px; height: 150px; position: relative; overflow: hidden;"> <div id="inside-content"&

我有一个800像素乘以150像素的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>


欢迎任何关于如何做的想法,提前谢谢

使用overflow-x和overflow-y提供不同的滚动/隐藏行为,而不是速记溢出CSS属性,并浮动内部内容。(并且不要在文档中的任何位置使用多个ID,而是使用类)

HTML:

以下是HTML/CSS的工作原理:-对于jQuery,您必须发布您尝试过的内容以及您遇到问题的确切部分。
<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>
#mask {
    width: 800px;
    height: 150px;
    overflow-x: auto;
    overflow-y: hidden;
}

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

.inside-content {
    float: left;
}