Altjen B. Altjen B. - 20 days ago 8
ASP.NET (C#) Question

How to make background images stretch and change every 3 seconds in asp.net

I am trying to make a slide show for the background image. this is the code so far:

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


I was trying to change the code image with this function:

setInterval(displayNextImage, 3000);


But is not working. Any suggestions?

Also, how can I set the image to stretch?

I used
background-size: cover


But is not working. Any suggestions?

Answer

To stretch image add width: 100%; and to automate image change add

In javascript

 <script> document.addEventListener("DOMContentLoaded", function(event) { startTimer(); }); </script>
Comments