Javascript 如何每特定时间向下滑动一张图片，依此类推

我想做幻灯片，我想做它的行为，每2分钟滑下1张图片，依此类推，直到图片结束，然后从第一张图片开始

我试着去做，我做了一部分（每2分钟换一张照片），但不是滑下1张照片，而是在不滑下的情况下换一张照片

还有一个可以帮我制作整个幻灯片

我的代码在下面

HTML

<div id="slideshow">
    <img src="images/slideshow.jpg" alt="" title="" />
    <img src="images/slideshow2.jpg" alt="" title="" />
    <img src="images/slideshow3.jpg" alt="" title="" />
    <img src="images/slideshow4.jpg" alt="" title="" />
    <img src="images/slideshow5.jpg" alt="" title="" />
</div>
<script type="text/javascript">
    window.onload = slideShow;
</script>

---

很抱歉我的大问题，但我真的需要帮助

您正在以每秒300像素的速度操纵幻灯片放映div上的scrollTop。如果您的图像正好是300px高，div正好是300px高，并且没有溢出，并且div强制您的图像垂直成一行，那么您的代码将每秒切换到下一个图像。因此，在回答您的问题时：

您还没有为要幻灯片的图像编写任何代码。将scrollTop更改300是一种突然的更改，而不是滑动更改

代码每秒钟更改一次scrollTop值，而不是每两分钟更改一次。setTimeout的第二个参数是以毫秒为单位的值。如果需要两分钟，则必须将该值设置为（1000*60*2）

下面是您在jsfiddle上运行的代码：带有一些真实的图像

如果希望图像实际滑动，则必须编写一些动画代码，以便在希望动画运行的时间段内，将scrollTop从其当前值缓慢操纵到enxt更高的值

动画可能很难从头做起。大多数人会选择使用CSS3动画，或者使用已经为您完成了正确类型的tweening工作的动画库（如jQuery或YUI中的动画库），因为它将更快，并且可能生成更高质量的结果

下面是一个可以使用jQuery查看和使用的工作示例：

HTML:

Javascript:

var counter = 0;

function gotoNextSlide() {
    var $ss = $("#slideshow");
    if (counter >= $ss.children().length - 1) {
        counter = 0;
    } else {
        counter++;
    }
    $ss.animate({'scrollTop': (counter * 66) + 'px'}, 1000);

}

setInterval(gotoNextSlide, 3000);

---

谢谢你的帮助，我为我的错误感到抱歉，我想要2秒钟而不是几分钟，而且我不喜欢谈论太多，但我理解当有一个例子时，请修改代码并进行必要的调整，以便成为一个代码，因为我想很好地理解，非常感谢你继续帮助我。我真的想要这个相同的例子，但是使用Javascript本身，而不是jQuery或其他我已经向您解释过，用纯Javascript制作好动画需要大量的工作。如果需要，您可以使用一个小的计时器间隔来编写自己的函数，以较小的值更改scrollTop。我不会为你写的。使用jQuery需要在页面中包含一个脚本。好的，但我已经完成了，但有一个小问题。图像上页边距中的问题显示了前一张图片的一部分。如果你能修复或感谢你help@LionKing“而且我也不喜欢谈论太多”-这是一种参与这样一个网站的态度，目的是学习一些东西。。。如果有人提供帮助，一般来说，“谈话”是答案中更重要的部分！

<div id="slideshow">
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130938160417/1190079664_chLyW-Ti.jpg" alt="" title="" />
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941050422/1190083195_Az688-Ti.jpg" alt="" title="" />
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941050421/1190083481_C3nag-Ti.jpg" alt="" title="" />
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941070426/1190078330_umaLY-Ti.jpg" alt="" title="" />
    <img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941070425/1190080772_RmZX2-Ti.jpg" alt="" title="" />
</div>

#slideshow {width: 100px; height: 66px; font-size: 0; overflow: hidden;}

var counter = 0;

function gotoNextSlide() {
    var $ss = $("#slideshow");
    if (counter >= $ss.children().length - 1) {
        counter = 0;
    } else {
        counter++;
    }
    $ss.animate({'scrollTop': (counter * 66) + 'px'}, 1000);

}

setInterval(gotoNextSlide, 3000);