个人中心
gpt4 book ai didi

javascript - 使用 javascript if/else 更改 div 背景图像

转载 作者：行者123 更新时间：2023-11-30 16:51:57 24 4
gpt4 key购买 nike

我试图让一个 div 的背景图像每隔一段时间改变一次。我用图像创建了一个数组，每隔几秒，该函数就会根据数组长度检查“x”的值。如果 X 较小，则 x 将增加 1，背景图像将更改为数组中的下一张图像，否则将设置 x=0 并重新启动该过程。div 和初始图像显示了我想要的方式，但没有任何反应。

我知道可能有更好的方法可以做到这一点，但我对 Javascript 还很陌生，想了解为什么这段代码不起作用。在此先感谢您的帮助!!

<!doctype html>
<html>
   <head>
      <meta charset="utf-8" />
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />

       <title>ImageChanger</title>

       <style type="text/css">

       #imagediv {
            float:left;
            border-style:ridge;
            border-width:8px;
            border-color:Green;
            border-radius:15px;
            width:1250px;
            height:450px;
            background-image:url(images/landscape1.jpg)
        }

       </style>

       <script type="text/javascript">

            function  displayNextImage() {
            var x;

            If (x<imageArray.length) {
                x=x+1;
                document.getElementById("imagediv").style.backgroundImage=images[x];
            } 
            else {
                x=0;
                document.getElementById("imagediv").style.backgroundImage=images[x];
            }

            function startTimer() {
                  setInterval(displayNextImage, 3000);
            }

            var imageArray=new Array();
            images[0] = "images/landscape1.jpg";
            images[1] = "images/landscape2.jpg";
            images[2] = "images/landscape3.jpg";
            images[3] = "images/landscape4.jpg";

       </script>
   </head>

    <body>
       <div id="imagediv">
       </div>
   </body>
</html>

最佳答案 

  If (x<imageArray.length) {..

应该是

 if (x<imageArray.length) {

Javascript 是 case-sensitive .

此外，您还缺少一些大括号，就像您没有关闭

function  displayNextImage() { ....

使用浏览器控制台进行调试。这些语法错误将在那里显示。

关于javascript - 使用 javascript if/else 更改 div 背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30396607/

24 4 0
文章推荐： javascript - 如何在更改新值后保持文本区域的旧值？
文章推荐： 将单词和数字与空格和逗号匹配的 Javascript 正则表达式匹配模式
文章推荐： c - 对 sqlite_open 的 undefined reference
文章推荐： javascript - 如何在用户选择其他选项时删除选项
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com