0

我想制作自动工作的简单幻灯片（无按钮）。图像应该从下到上滑动。我已经解释了代码之后的内容。

羟色胺：

<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()”函数获取列表的“顶部”，并为“i”分配了该值。变量“j”被分配了“i-290”（因为 290px 是每个图像的高度）。现在“i”、“j”和目标对象（这里是图像列表）被传递给下一个函数“slideIt()”。'slideIt()' 函数每次从目标对象的 'top' 中减去 '1px' 并一遍又一遍地调用，直到 'top' 等于 'finalTop'（分配给 'j' 的值）。当这个条件满足时，'initAll' 函数在 10 秒后被回调。

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

控制台说：“无法设置未定义的属性‘顶部’”

4

2 回答 2

1

我相信下面描述的想法可以帮助你实现你想要的。
（另请参阅此工作演示。）

主要思想是一次滚动 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
...
于 2013-05-12T15:59:24.773 回答
0

尝试更改此行：

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是undefined。导致您提到的错误“无法设置未定义的属性'top'”。

于 2013-05-12T12:46:05.353 回答