JavaScript幻灯片（无jQuery或任何其他库）

我想让简单的幻灯片自动工作（没有按钮）。图像应该从下到上滑动。我已经解释了代码之后的事情

HTmL:

我在这里尝试做的是： “initAll（）”函数获取列表的“top”，并为“i”赋值。变量'j' 被指定为“i-290”（因为290px是每个图像的高度）。现在，“i”、“j”和目标对象（这里是图像列表）被传递到下一个函数“slideIt（）”slideIt（）函数每次从目标对象的“top”中减去“1px”，并被反复调用，直到“top”变为“finalTop”（这是分配给“j”的值）。当满足此条件时，“initAll”函数将在10秒后回调

现在，为什么这个代码不起作用

---

控制台显示：“无法设置未定义的属性“top”

请尝试更改此行：

window.setTimeout(function(){ slideIt(presentTop, finalTop, this), 20})

将是：

window.setTimeout(function(){ slideIt(presentTop, finalTop, target), 20})

我不知道你为什么要使用

this

，但是

this

在那一点上可能等于

window

，这意味着你正在将

window

传递到

slideIt（）

中，它希望引用你的图像。那么在代码行中：

target.style.top

…因为

target

现在是

window

它实际上正在尝试：

window.style.top

---

…和

window.style

是

未定义的
。导致您提到的错误，“无法设置未定义的属性“top”。
我相信下面描述的想法可以帮助您实现您的目标。

（另请参见此）

其主要思想是一次滚动1个像素，直到达到预定的“检查点”。检查点是图像相对于滑块容器的偏移量（即在您的情况下为
元素）

当达到某个检查点时，确定下一个检查点（下一个图像相对于滑块容器的偏移量）并继续滚动过程

...
/* Reached new image ("check-point") */
nextIdx++;
nextTop = (nextIdx < imgs.length) 
    ? imgs[nextIdx].offsetTop - slider.offsetTop     // <-- next check-point
    : -1;     // <-- last image reached, just scroll to the bottom    
setTimeout(function() {
    slider.scrollTop += 1;
    slideIt(slider, nextTop, ...);
}, newImgDelay);     // <-- stay longer (e.g. 10s) 
                     //     to let the user see the new image
...

。。。
/*已到达新图像（“检查点”）*/
nextix++；
nextTop=（nextitx? imgs[nextIdx].offsetTop-slider.offsetTop//
，20
位于错误的位置。@SLaks我更正了它。但它仍在不断地移动。当图像改变时，它应该停止10秒。我改变了它，它就工作了。但不是我想要的工作方式。我想要的是当图像滑动时，下一张图像应该在屏幕上停留10秒钟。但事实并非如此。它是连续滑动的。（如果您使用的是JSFIDLE演示中的代码，我稍微修改了它，以考虑用户手动向下滚动（通过下一个检查点）的情况。）
window.style.top

function slideIt(slider, ...) {
    ...
    setTimeout(function() {
        slider.scrollTop += 1;
        slideIt(slider, ...);
    }, 20);
    ...
}

...
/* Reached new image ("check-point") */
nextIdx++;
nextTop = (nextIdx < imgs.length) 
    ? imgs[nextIdx].offsetTop - slider.offsetTop     // <-- next check-point
    : -1;     // <-- last image reached, just scroll to the bottom    
setTimeout(function() {
    slider.scrollTop += 1;
    slideIt(slider, nextTop, ...);
}, newImgDelay);     // <-- stay longer (e.g. 10s) 
                     //     to let the user see the new image
...