Question

我想制作一个自动工作的简单幻灯片（没有按钮）。图像应从下往上滑动。我在代码之后解释了事情。

HTML：

<ul id="imgSlider1">
    There are images here in <li> tags
</ul>

JavaScript：

window.onload = initAll;

function initAll(){
    var img = document.getElementById("imgSlider1");

    if((parseInt(window.getComputedStyle(img).top)) == -1160){
    img.style.top = 290 +"px";}

    var i = parseInt(window.getComputedStyle(img).top);   
    var j = i-290;

    slideIt(i, j, img);
}

function slideIt(initTop, finalTop, target){
    if(initTop == finalTop){
    window.setTimeout(initAll, 10000);
    }

    target.style.top = (initTop - 1)+"px";

    var presentTop = parseInt(window.getComputedStyle(target).top);
    window.setTimeout(function(){ slideIt(presentTop, finalTop, this)},20)
}

我在这里尝试做的事情： 'initAll（）'函数获取列表的'top'，并为'i'赋值。变量'j' 被赋予'i-290'（因为290px是每个图像的高度）。现在'i'，'j'和目标对象（这里是图像列表）被传递给下一个函数'slideIt（）'。 'slideIt（）'函数每次从目标对象的“顶部”减去'1px'，并且一遍又一遍地调用，直到'top'变为等于'finalTop'（赋值给'j'的值）。满足此条件时，“initAll”函数将在10秒后回调。

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

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

Answer 1

我相信下面描述的想法可以帮助您实现您想要的目标（另请参阅此 working demo 。）

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

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
...

Answer 2

尝试更改此行：

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

成为：

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

我不确定您使用this的原因，但this此时可能等于window，这意味着您将window传递给{{} 1}}它需要对图像的引用。那么在代码行中有：

slideIt()

...因为target.style.top现在是target，它实际上是在尝试：

window

...而window.style.top是window.style。导致您提到的错误“无法设置未定义的属性'top'。

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

2 个答案: