Question

在学校他们只教如何应用javascript来改变我们网页的bgcolor。我希望当我鼠标悬停按钮或div内容时，div的背景图像应该自动更改。我的代码中缺少什么？

HTML：

<!DOCTYPE html>
<html>
<body>
<center>
<input type="button" name="b1" value="Change Image" onmouseover="f1()">
<script src="javascript1.js">
</script>
<br><br>
<div id="main">
<h1>Karan</h1>
<h1>Karan</h1>
</div>
</body>
</html>

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);
}

Answer 1

您需要将main作为传递给document.getElementById()的字符串。

例如：

document.getElementById("main")

我也可以拨打setInterval，或者我会以setTimeout递归地使用你的回调函数的参数来跟踪你所处的时间间隔...你的方式和方式＃39;现在重新构建它有点令人困惑，它基本上看起来像你的所有函数将在1200毫秒后立即调用，而不是获得你正在寻找的序列。

例如：

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);

Answer 2

通过将wp_update_post ( array ( 'ID' => $attachment[ 'id' ] , 'post_parent' => $id_new_post ) )与自执行功能结合使用并将图像网址存储在数组中，您可以缩短代码并使其更简洁。

setTimeout

<div id="switcher"></div>

#switcher {
    width: 300px;
    height: 300px;
    border: 2px solid orange;
}

jsFiddle：http://jsfiddle.net/8ms46d65/

Answer 3

这里有许多语法和功能错误。这是一个有效的fiddle，并对其进行了更正。

首先，您需要在输入之前包含您的javascript文件，该文件具有onmouseover属性。如果您不首先加载javascript，它将不知道f1是什么。（这是通过告诉它在<head>）

中包含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);
}

首先，您在调用main时需要document.getElementById()左右的引号，否则它会尝试查找名为main的变量，而不是查找ID为“main”的元素”。

下一个问题是您将字符串传递给window.setTimeout()函数。

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

相反，您需要传递对该函数的引用，如下所示。

window.setTimeout(f2, 1200);

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

Answer 4

抱歉hungerstar你的代码有一些不好的元素，我必须指出其他人。全球范围内的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 );令我感到震惊。

third_party_id

做同样的事情，不要在全球范围内留下任何东西。更快更安全，应该如何完成。

mFAB = (FloatingActionButton) findViewById(R.id.fab);
mFAB.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar.make(v, "Yummy snackbar", LENGHT_LONG).show();
    }
});
mFAB.getDrawable().mutate().setTint(getResources().getColor(R.color.colorAccent));

我希望div的背景图像应该自动更改

4 个答案: