javascript - How to make background images stretch and change every 3 seconds in asp.net -
i trying make slide show background image. code 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 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 lower --%> </div> </form> </body>
i trying change code image function:
setinterval(displaynextimage, 3000);
but not working. suggestions?
also, how can set image stretch?
used background-size: cover
not working. suggestions?
to stretch image add width: 100%;
, automate image change add
in javascript
<script> document.addeventlistener("domcontentloaded", function(event) { starttimer(); }); </script>
Comments
Post a Comment