我正在使用javascript创建一个图像幻灯片，但代码不起作用

I am using javascript to create an image slideshow, but the code is not working

本文关键字：图像 一个 幻灯片 不起作用 代码 javascript 创建      更新时间：2023-09-26

我正在使用javascript创建一个图像幻灯片，但没有显示任何图像。

我做错了什么？

window.onLoad(
  window.setInterval(function() {
    var source = ["niepic1.jpg", "niepic.png"];
    var count = 0;
    document.getElementById("cover_main").style.backgroundImage = url(source[count]);
    if (count >= 2) {
      count = 0;
    } else {
      count++;
    }
  }, 5000);
);

#cover_main {
     background-image: url("");
     height: 45%;
     background-size: 100% 100%;
     width:100%;
     height:480px;
}
#cover_main_inside {
    background-color:#A8A8A8 ;
    opacity: 0.76;
    margin-left: 75%;
    margin-top: 2%;
}

<div class="row" id="cover_main">
    <div class="col-3" style=" color:black; background-color:; border-radius:15px;" id="cover_main_inside">
        <form class="form" action="pages/main/aboutteam.html" method="POST">
            <h2 style="margin-left:40px;">Log In:</h2>
            E-mail Address:<br>
            <input id="name" type="email" name="email" placeholder="name@nie.ac.in" required><br><br>
            Password:<br>
            <input type="password" name="password" placeholder="********" required><br><br>
            <input class="input-button" type="submit" name="submit" value="Let Me In">
        </form><br>
        <a href="pages/main/profile.html" style="margin-left:35px;">Forgot Password?</a>
    </div>
</div>

编写的代码有几个问题——首先，我认为您没有正确调用window.onload。此外，将count变量移出setInterval调用，否则在设置backgroundImage时它将始终为0。您也不需要重新设置source数组，这样就可以从setInterval中取出。最后，源数组中只有2个元素，如果计数大于1，则可以重置计数，因为JavaScript数组是0索引的。

var count = 0;
var source = ["niepic1.jpg","niepic.png"];
window.onload = function () {
    window.setInterval(function() {
        document.getElementById("cover_main").style.backgroundImage = "url('" + source[count] + "')";
        if (count >= 1)
        {
            count = 0;
        } 
        else 
        {
            count++;
        }
    }, 5000);
}

在编写时在代码中

document.getElementById("cover_main").style.backgroundImage = url(source[count]);

这里你指的是url函数的url变量或更多变量，它不存在并破坏了你的代码，所以使用

document.getElementById("cover_main").style.backgroundImage = 'url("'+source[count]+'")';


var count = 0;
var source = ["niepic1.jpg", "niepic.png"];
setInterval(function() {
    
    document.getElementById("cover_main").style.backgroundImage = 'url("'+source[count]+'")';
document.getElementById("cover_main").innerHTML = "current background-image style is "+document.getElementById("cover_main").style.backgroundImage;
    count = (count >= 1)? 0 : ++count;
  }, 1000);
#cover_main {
     background-image: url("");
     height: 45%;
     background-size: 100% 100%;
     width:100%;
     height:480px;
}
#cover_main_inside {
    background-color:#A8A8A8 ;
    opacity: 0.76;
    margin-left: 75%;
    margin-top: 2%;
}
<div class="row" id="cover_main">
    <div class="col-3" style=" color:black; background-color:; border-radius:15px;" id="cover_main_inside">
        <form class="form" action="pages/main/aboutteam.html" method="POST">
            <h2 style="margin-left:40px;">Log In:</h2>
            E-mail Address:<br>
            <input id="name" type="email" name="email" placeholder="name@nie.ac.in" required><br><br>
            Password:<br>
            <input type="password" name="password" placeholder="********" required><br><br>
            <input class="input-button" type="submit" name="submit" value="Let Me In">
        </form><br>
        <a href="pages/main/profile.html" style="margin-left:35px;">Forgot Password?</a>
    </div>
</div>

相关文章：