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

Question

I am trying to get the background image of a div to change at an interval. 我正在尝试使div的背景图像每隔一段时间更改一次。 I created an Array with the images, and every few seconds the function should check the value of "x" against the array length. 我用图像创建了一个数组，该函数应每隔几秒钟对照数组长度检查一次“ x”的值。 If X is less, x will increase by one and the background image will change to the next image in the array, otherwise it will set x=0 and restart the process. 如果X较小，则x将增加1，并且背景图像将更改为数组中的下一个图像，否则它将设置x = 0并重新开始该过程。 The div and initial image shows up how I want, but nothing happens. div和初始图像显示了我想要的内容，但没有任何反应。

I know there are probably better ways to do this, but I am very new to Javascript and want to learn why this code doesn't work. 我知道可能有更好的方法可以做到这一点，但是我对Javascript还是很陌生，想了解为什么这段代码不起作用。 Thanks in advance for the help!! 先谢谢您的帮助！！

<!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>

Answer 1

  If (x<imageArray.length) {..

should be 应该

 if (x<imageArray.length) {

Javascript is case-sensitive . Javascript 区分大小写。

Also you have some missing braces like you are not closing 另外，您还有一些缺失的braces例如您没有关闭

function  displayNextImage() { ....

Use your browser console to debug. 使用浏览器控制台进行调试。 These syntax errors will be shown there. 这些语法错误将在此处显示。

Answer 2

As far as syntax issues go: 就语法问题而言：

As @Zee stated, If should be lowercase ( if ) 如@Zee所述， If应该是小写字母（ if ）
Also, as @Zee and some others stated, you are not closing function displayNextImage() { with a closing brace } . 而且，正如@Zee和其他一些人所指出的，您并没有关闭function displayNextImage() {带有右括号} 。
You are improperly defining the background-image property in your function, whereas you defined it correctly in the block of CSS. 您在函数中定义了background-image属性，而在CSS块中正确定义了background-image属性。 You must wrap the image name with url() . 您必须使用url()包装图像名称。
You are never calling your timeout function, startTimer . 您永远不会调用超时功能startTimer 。
You create a new array imageArray but then use an undeclared array images 您创建一个新的数组imageArray ，然后使用未声明的数组images

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

问题描述

2 个解决方案

解决方案1
2 2015-05-22 12:22:24

解决方案2
0 2015-05-22 13:11:46

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

问题描述

2 个解决方案

解决方案1 2 2015-05-22 12:22:24

解决方案2 0 2015-05-22 13:11:46

解决方案1
2 2015-05-22 12:22:24

解决方案2
0 2015-05-22 13:11:46