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

我想获取div的背景图像以间隔进行更改。我创建了一个包含图像的数组，每隔几秒，函数应该检查数组长度的“x”值。如果X较小，则x将增加1，并且背景图像将变为阵列中的下一个图像，否则它将设置x = 0并重新启动该过程。 div和初始图像显示了我想要的，但没有任何反应。使用javascript更改div背景图像if/else

我知道有可能有更好的方法来做到这一点，但我对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>

来源

2015-05-22 Brian W Willmott

可能重复[如何使用JavaScript更改div的背景图像？]（http://stackoverflow.com/questions/21496905/how-to-change-the-background-image-of-div-using-javascript） – Nitesh

学习在浏览器中使用JavaScript控制台。它会将您指向错误的一般区域。缺少结束语}并在if上输入错误。 – epascarello

代码缺少一些大括号'修复'它 – ozil

If (x<imageArray.length) {..

应该

if (x<imageArray.length) {

JavaScript是case-sensitive。

你也有一些失踪braces就像你不关闭

function displayNextImage() { ....

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

来源

2015-05-22 12:22:24 Zee

至于语法问题去：

由于@Zee指出，If应该小写（if）
而且，@Zee和其他一些人说，你不关闭function displayNextImage() {与一个右大括号}。
您在函数中错误地定义了background-image属性，而您在CSS块中正确定义了它。您必须用url()包装图像名称。
你永远不会打电话给你的超时功能，startTimer。
您创建一个新的数组imageArray但然后使用一个未声明的数组images

的

来源

2015-05-22 13:11:46 chazsolo

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

回答

相关问题