我已经为不断变化的图像制作了 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)
}
最佳答案
首先,您没有指定代码在页面加载/文档准备就绪时执行。其次,在 jsfiddle 中,您忘记导入 jquery。你也忘了调用初始函数。您还忘记了 img 标签中的样式属性。
编辑:现在图像具有响应性。 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);
}
});
关于Javascript 每隔几秒更改一次图像就可以工作,但会禁用一些其他代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25215597/