Javascript 我希望div的背景图像应该不断自动改变

在学校里，他们只教如何应用javascript来改变我们网页主体的颜色。我希望当我将鼠标移到按钮或div内容上时，div的背景图像会自动改变。我的代码中缺少了什么

HTML:

---

您需要使

main

成为传递给

document.getElementById（）

的字符串

例如：

document.getElementById("main")

function change_image(num) {
    switch(num) {
        case 0:
            document.getElementById("main").style.backgroundImage = /* something */
            break;
        case 1:
            document.getElementById("main").style.backgroundImage = /* something else */
            break;
        case 2:
            document.getElementById("main").style.backgroundImage = /* something else */
            break;
        /* cases 3-6 */
    };

    //this will cause num to repeat from 0-6
    setTimeout(change_image, 1200, (num + 1) % 7);
}

//make the initial call
setTimeout(change_image, 1200, 0);

另外，我要么调用

setInterval

，要么递归地使用

setTimeout

和回调函数的一个参数，该参数将跟踪您所处的时间间隔。。。你现在构建它的方式有点混乱，基本上看起来你所有的函数都会在1200ms后立即调用，而不是得到你想要的序列

例如：

document.getElementById("main")

function change_image(num) {
    switch(num) {
        case 0:
            document.getElementById("main").style.backgroundImage = /* something */
            break;
        case 1:
            document.getElementById("main").style.backgroundImage = /* something else */
            break;
        case 2:
            document.getElementById("main").style.backgroundImage = /* something else */
            break;
        /* cases 3-6 */
    };

    //this will cause num to repeat from 0-6
    setTimeout(change_image, 1200, (num + 1) % 7);
}

//make the initial call
setTimeout(change_image, 1200, 0);

---

这里有许多语法和函数错误。下面是一个与他们一起工作的更正

首先，您希望在具有

onmouseover

属性的输入之前包含javascript文件。如果不先加载javascript，它将不知道什么是

f1

。（这是通过告诉它在

中包含javascript来实现的）

接下来，您的javascript文件中有一些语法错误。我在这里纠正了他们：

function f1()
{
document.getElementById('main').style.backgroundImage = "url('https://upload.wikimedia.org/wikipedia/commons/7/7c/Aspect_ratio_16_9_example.jpg')";
window.setTimeout(f2,1200);
}
function f2()
{
document.getElementById('main').style.backgroundImage = "url('http://gallery.onderhond.com/galleries/2009/santorini-towns/08.JPG')";
window.setTimeout(f3,1200);
}
function f3()
{
document.getElementById('main').style.backgroundImage = "url('https://upload.wikimedia.org/wikipedia/commons/7/7c/Aspect_ratio_16_9_example.jpg')";
window.setTimeout(f4,1200);
}
function f4()
{
document.getElementById('main').style.backgroundImage = "url('http://gallery.onderhond.com/galleries/2009/santorini-towns/08.JPG')";
window.setTimeout(f5,1200);
}
function f5()
{
document.getElementById('main').style.backgroundImage = "url('https://upload.wikimedia.org/wikipedia/commons/7/7c/Aspect_ratio_16_9_example.jpg')";
window.setTimeout(f6,1200);}
function f6()
{
document.getElementById('main').style.backgroundImage = "url('http://gallery.onderhond.com/galleries/2009/santorini-towns/08.JPG')";
window.setTimeout(f7,1200);
}
function f7()
{
document.getElementById('main').style.backgroundImage =  "url('https://upload.wikimedia.org/wikipedia/commons/7/7c/Aspect_ratio_16_9_example.jpg')";
window.setTimeout(f1,1200);
}

首先，在调用

document.getElementById（）

时，需要在

main

周围加引号，否则它将尝试查找名为main的变量，而不是查找id为“main”的元素

下一个问题是将字符串传递给

窗口.setTimeout（）

函数

window.setTimeout("f2()", 1200);

相反，您需要向函数传递一个引用，如下所示

window.setTimeout(f2, 1200);

---

通过这些修复，可以达到预期的效果。当您将鼠标移到按钮上时，它会加载第一个图像作为“main”div的背景，然后每隔1200毫秒交换一次图像。

您可以通过使用带有自执行功能的

setTimeout

并将图像URL存储在数组中，来缩短代码并使其更加简洁

#切换器{
宽度：300px；
高度：300px；
边框：2倍纯色橙色；
}

var i=0；
（函数rotateBG（）{
var el=document.getElementById（'switcher'）；
变量图像=[
'http://placehold.it/300x300&text=1',
'http://placehold.it/300x300&text=2',
'http://placehold.it/300x300&text=3',
'http://placehold.it/300x300&text=4'
];
el.style.backgroundImage='url（'+images[i]+'）；
i++；
如果（i==4）{
i=0；
}
设置超时（rotateBG，1200）；
})();

---

jsFiddle:

很抱歉，hungerstar您的代码中有一些不好的元素，我必须向其他人指出。正是全球范围内的

var i

让我震惊地发布了这篇文章

// Never ever use 'i' in the global scope it will cause all sorts of head aches
var i = 0;  // so wrong, please never do this in global scope. PLEASE!!!.

// Now you are starting the code without checking if everything is in place.. Dom could be busy???
// you are also adding to the global scope. Never add to the global scope unless you have been commanded by god him self.
(function rotateBG() {      
    var el = document.getElementById( 'switcher' );  // should not be getting an element every time you need it. Get it once only
    var images = [  // over 300 bytes to store a number you are already tracking.. This has to go.
        'http://placehold.it/300x300&text=1',
        'http://placehold.it/300x300&text=2',
        'http://placehold.it/300x300&text=3',
        'http://placehold.it/300x300&text=4'
        ];

    // appart from the array access all good.
    el.style.backgroundImage = 'url(' + images[ i ] + ')';

    // very slow way of doing a cycling counter;
    i++;
    if ( i === 4 ) {
      i = 0;
    }

    setTimeout( rotateBG, 1200 );

})();

做同样的事情，不在全局范围内留下任何东西。更小、更安全、更快，以及应该如何做

window.addEventListener( // wait for DOM to do its thing.
    "load",
    function(){
        var imageTick = function(){ // function scope to load function
            imageSwitchingElement.style.backgroundImage = 'url(http://placehold.it/300x300&text='+(imageCounter+=1)%4+')';
            setTimeout(imageTick,1200);
        }
        var imageCounter = 0;  // use closure vars in load function scope to keep data you need
        var imageSwitchingElement = document.querySelector('#switcher');    // get the element only once
        imageTick(); // start up the ticker.
    },
    false
);

你可以使用这个插件：我喜欢使用模数来设置间隔值。