0

尝试为测试网页制作一个小幻灯片。我对为什么这段代码不起作用感到困惑（我对 javascript 不是很有经验，我主要处理 Java，Javascript 相当令人沮丧）。另外我想添加它确实开始运行它会在几秒钟后切换到第三张图片然后它停止不再切换。

var backgroundElement = document.getElementById("innerContent");
var minibarImage1 = document.getElementById("pic1");
var minibarImage2 = document.getElementById("pic2");
var minibarImage3 = document.getElementById("pic3");


minibarImage1.onmouseover = function(){
    backgroundElement.style.backgroundImage="url('images/frontpage/maintenance_01.jpg')";
};

minibarImage2.onmouseover = function() {
    backgroundElement.style.backgroundImage ="url('images/frontpage/natural_steps_01.jpg')";
};

minibarImage3.onmouseover = function() {
    backgroundElement.style.backgroundImage = "url('images/frontpage/twnshp_bdg_01b.jpg')";
};

function slideshow() {
setTimeout(function(){backgroundElement.style.backgroundImage= "url('images/frontpage/maintenance_01.jpg')";}, 2000);
setTimeout(function(){backgroundElement.style.backgroundImage = "url('images/frontpage/natural_steps_01.jpg')";}, 2000);
setTimeout(function(){backgroundElement.style.backgroundImage = "url('images/frontpage/twnshp_bdg_01b.jpg')";}, 2000);
}   


 window.onload = setInterval(function(){slideshow();}, 8000);
4

2 回答 2

3

正如我已经指出的那样：

window.onload = setInterval(function(){slideshow();}, 8000);

应该是这样的：

window.onload = function(){
    setInterval(function(){slideshow();}, 8000);
}

window.onload存储一个函数。setInterval返回间隔的 id - 以便您可以选择停止它。

此外，setTimeout不会暂停程序的执行。因此，您对 all 的连续调用同时setTimeout执行 - 在调用slideshow.

您可以尝试嵌套回调函数，如下所示：

function slideshow (){

    setTimeout(function(){
        backgroundElement.style.backgroundImage= "url('images/frontpage/maintenance_01.jpg')";
        setTimeout(function(){
            backgroundElement.style.backgroundImage = "url('images/frontpage/natural_steps_01.jpg')";
            setTimeout(function(){
                backgroundElement.style.backgroundImage = "url('images/frontpage/twnshp_bdg_01b.jpg')";
                slideshow();
            },  2000);
        },  2000);
    },  2000);
}

slideshow();

可能有一种更优雅的方式，但你明白了。

编辑：

这可能更优雅：

function slideshow() {
    setTimeout (function(){backgroundElement.style.backgroundImage = "uri";}, 2000);
    setTimeout (function(){backgroundElement.style.backgroundImage = "uri";}, 4000);
    setTimeout (function(){backgroundElement.style.backgroundImage = "uri";}, 6000);
    setTimeout (slideshow, 8000);
}

将秒数替换为 2。您甚至可以通过添加一组 url 和时间步长参数来使幻灯片功能更加模块化，这样您就可以setTimeout在一组 url 上迭代函数。

有点像这样（伪代码）

function slideshow (urls, timestep){
    var i = 0;
    for (; urls[i]; i++)
        setTimeout (function(){ backgro... = urls[i];}, timestep * i);

    setTimeout (slideshow, timestep * i);
}

slideshow (["url1", "url2", "url3"], 2000);
于 2013-06-10T06:05:06.310 回答
1

关于您只看到第三张幻灯片：

setTimeout在简单地安排其他代码运行后立即返回的调用。

所以在你的slideshow功能中，你

  1. 安排第一张幻灯片在 2 秒后显示
  2. 然后立即安排第二张幻灯片在 2 秒后显示
  3. 然后立即安排第三张幻灯片在 2 秒内显示

第二张幻灯片显示在第一张之后的纳秒，然后第三张在第二张之后的纳秒。您只能看到第三张幻灯片出现了！

编辑

这是可用于幻灯片放映的一般方法。（注意有几个库可以为你做这件事，但这实际上是学习 JavaScript 的一个很好的练习。）

首先，构建幻灯片以使用计数器循环显示图像。在专业的 JavaScript 中，你将计数器包装在一个闭包中，以免污染全局命名空间：

var slideshow = (function () {
    var images = [
        'images/frontpage/maintenance_01.jpg',
        'images/frontpage/natural_steps_01.jpg',
        'images/frontpage/twnshp_bdg_01b.jpg'
    ];
    var index = 0;
    return function () {
        backgroundElement.style.backgroundImage= "url(" + images[index] + ")";
        index = (index + 1) % images.length;
        setTimeout(slideshow, 2000);
    }
}());

现在，您甚至无需等待 8 秒即可启动一切。你可以摆脱这个：

window.onload = slideshow;

请注意这里没有括号，因为您不想将调用的结果分配slideshow给onload，您希望 onload 函数为 slideshow。

于 2013-06-10T06:04:12.693 回答