JavaScript Slideshow（没有jQuery或任何其他库）

我想制作自动工作的简单幻灯片（无按钮）。图像应该从下到上滑动。我已经在代码之后解释了这些事情。JavaScript Slideshow（没有jQuery或任何其他库）

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

现在，为什么不是这个代码工作？

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

来源

2013-05-12 Navneet Saini

'，20'是在错误的地方。 – SLaks 2013-05-12 12:51:46

@SLaks我改正了它。但它仍然在不断移动。它应该停止10秒，当图像变化 – 2013-05-12 12:59:55

我相信下面介绍的想法可以帮助你实现你想要的。
（另请参见本working demo。）

的主要思想是滚动在时间1个像素，直到预先确定的“检查点”为止。检查点是图像相对于滑块容器的偏移量（即您的案例中的<ul>元素）。

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

当到达一个检查点，你确定下一个检查点（下一个图像的偏移相对滑块容器）和continute滚动处理。

... 
/* 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-12 15:59:24 gkalpak

非常感谢。你的回答清除了很多疑问！ – 2013-05-12 16:08:42

NP。（如果您使用jsFiddle演示代码，我稍微修改它以考虑用户的手动向下滚动（经过下一个检查点）。） – gkalpak 2013-05-12 16:28:38

尝试改变这一行：

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。导致你提到的错误，“不能设置未定义的属性顶部”。

来源

2013-05-12 12:46:05 nnnnnn

我改变了它，并工作。但不是我想要它工作的方式。我想要的是当图像滑动时，下一个图像应保持在屏幕上10秒。但那没有发生。它不断滑动。 – 2013-05-12 12:54:36

JavaScript Slideshow（没有jQuery或任何其他库）

回答

相关问题