Javascript 每隔几秒更改一次图像就可以工作，但会禁用一些其他代码

Question

我已经为不断变化的图像制作了 JavaScript，但它禁用了一些其他代码。看到我在下面写的代码后，您就会明白我在告诉您什么。看一看，看看出了什么问题。任何形式的帮助表示赞赏:D
这是代码

HTML

<div class="Wrapper2">
  <div id="HomeRooms"/> </div>
</div>

CSS

#HomeRooms {
    position:absolute;
    top:100%;
    left:0px;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:50% 50%;
    background-repeat: no-repeat;
    background-image: url(Images/Home/HomeRoomImage.jpg);
    margin:0px;
    padding:0px;
}

.Wrapper2 {
    width:100%;
    height:100%;
}

我对 JavaScript 了解不多，我只是一个初学者。所以我不知道我刚刚做了什么。这是 JavaScript

var picCount=0;  
var picArray= ["Images/Home/HomeRoomImage.jpg","Images/Home/HomeRoomImage2.jpg"]
 function nextPic()
  {  picCount=(picCount+1<picArray.length)? picCount+1 : 0;
     var build='<img border="0" src="'+picArray[picCount]+
     '" position:absolute;top:100%;left:0px;width:100%;height:100%;background-size:cover;background-position:50% 50%;background-repeat: no-repeat;background-image: url(Images/Home/HomeRoomImage.jpg);margin:0px;padding:0px;" >\n';
     document.getElementById("HomeRooms").innerHTML=build;
     setTimeout('nextPic()',2000)
  }

Answer 1

首先，您没有指定代码在页面加载/文档准备就绪时执行。其次，在 jsfiddle 中，您忘记导入 jquery。你也忘了调用初始函数。您还忘记了 img 标签中的样式属性。

JSFIDDLE UPDATE

编辑:现在图像具有响应性。 P.S 确保你的图像都具有相同的宽度，虽然我知道你使用了两个虚拟图像的例子。

HTML:

<div class="Wrapper2">
  <div id="HomeRooms"></div>
</div>

CSS:

#HomeRooms {
    position:absolute;
    top:0%;
    left:0px;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}

#HomeRooms img{
    max-width:100%;
}

.Wrapper2 {
    width:100%;
    height:100%;
}

我更正了代码。这是新版本:

//Document ready
$(function(){
    var picCount=0;  
    var picArray= ["http://bit.ly/1uxYSSb","http://bit.ly/1oOrsO6"];

    //Initial call to execute the function
    nextPic();

    function nextPic()
    {  
        picCount=(picCount+1<picArray.length)? picCount+1 : 0;
        var build='<img border="0" src="'+picArray[picCount]+'" />';
        document.getElementById("HomeRooms").innerHTML=build;
        setTimeout(function(){nextPic();},2000);
    }
});