我正在尝试制作背景图片的幻灯片。这是到目前为止的代码:
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
function startTimer() {
setInterval(displayNextImage, 3000);
}
var images = [], x = -1;
images[0] = "assets/Images/Image1.jpg";
images[1] = "assets/Images/Image2.jpg";
images[2] = "assets/Images/Image3.jpg";
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="CenterContents" onload = "changeImage()">
<%-- write everything here --%>
<img id="img" src="assets/Images/Image3.jpg">
<button type="button" onclick="displayPreviousImage()">Previous</button>
<button type="button" onclick="displayNextImage()">Next</button>
<%-- dont write anything lower than this --%>
</div>
</form>
</body>
我试图用这个函数改变代码图像:
setInterval(displayNextImage, 3000);
但是不工作。有什么建议吗？
另外，如何设置图片拉伸(stretch)？
我使用了 background-size: cover
但是没有用。有什么建议吗？
最佳答案
要拉伸(stretch)图像添加 width: 100%; 并自动更改图像添加
在javascript中
<script> document.addEventListener("DOMContentLoaded", function(event) { startTimer(); }); </script>
关于javascript - 如何在asp.net中每3秒拉伸(stretch)和更改背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40572981/