所以，我在我的索引页面上有这个画廊，我的客户希望它在一个设定的计时器上自动滚动。我不知道如何做到这一点，因为我使用的代码是从朋友那里借来的。这是HTML和CSS：
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2</label>
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3</label>
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4</label>
<div class="clr"></div>
<div class="cr-bgimg">
<div>
<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
</div>
<div>
<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
</div>
<div>
<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
</div>
<div>
<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
</div>
</div>
<div class="cr-titles">
<h3><span>Expierenced</span><span>Get that sound you're looking for from a Grammy nominated staff</span></h3>
<h3><span>competitive</span><span>get more than a bang for your buck, get a rocket launcher</span></h3>
<h3><span>Stacked</span><span>We have the tool for every job</span></h3>
<h3><span>Comprehensive</span><span>We'll be with you from start to finish</span></h3>
</div>
</section>
</div>
</div>
这就是CSS
@font-face {
font-family: 'BebasNeueRegular';
src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* CSS reset */
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: auto;
color: #FFFFFF;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size: 36px;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
section, header{
display: block;
}
/* General Demo Style */
body{
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-weight: 400;
font-size: 15px;
color: #3a2127;
overflow-y: scroll;
background-color: #fff;
background-repeat: repeat;
background-position: left top;
}
a{
color: #333;
text-decoration: none;
}
.container1{
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.clr{
clear: both;
}
.container1 > header{
padding: 20px 30px 10px 30px;
margin: 0px 20px 10px 20px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
text-align: center;
}
.container1 > header h1{
font-family: Arial, sans-serif;
font-size: 35px;
line-height: 35px;
position: relative;
font-weight: 400;
color: #000;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
padding: 0px 0px 5px 0px;
}
.container1 > header h1 span{
color: #000;
text-shadow: 0px 1px 1px #000);
}
.container1 > header h2{
font-size: 16px;
font-style: italic;
color: #000;
text-shadow: 0px 1px 1px #000;
}
/* Header Style */
.codrops-top{
line-height: 24px;
font-size: 11px;
background: #000;
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a{
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
text-shadow: 0px 1px 1px #fff;
display: block;
float: left;
}
.codrops-top a:hover{
background: #fff;
}
.codrops-top span.right{
float: right;
}
.codrops-top span.right a{
float: left;
display: block;
}
p.codrops-demos{
text-align:center;
display: block;
padding: 14px;
}
p.codrops-demos a,
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
display: inline-block;
font-size: 10px;
font-style: normal;
width: 60px;
height: 60px;
margin: 0px 3px;
line-height: 30px;
border-radius: 50%;
font-weight: 800;
box-shadow: 1px 1px 1px rgba(0,0,0,0.05) inset;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
background-color: #000;
}
p.codrops-demos a:hover{
background: #000;
}
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
color: #fff;
background: rgba(255,255,255,0.9);
box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
}
答案 0 :(得分：0)
我不知道这是否符合你的要求，但你的意思是这样吗？
您必须平衡实际调用该函数的时间，以及每次滚动div的程度。
var div = $('#img');
//How many milliseconds between each call.
var time = 100;
setInterval(function(){
var pos = div.scrollTop();
//How far it will scroll everytime,
//increasing it will make it jump, and decreasing will make it more smooth.
var scrollingsmoothness = 5;
div.scrollTop(pos + scrollingsmoothness);
}, time)
在这里检查小提琴！
更新小提琴以匹配您的示例，但有更多的跨度向您显示滚动效果。
Demo of autoscroll