html - How to alter the background size of the images in a javascript slideshow -
i have basic slideshow, 3 pictures, cycle automatically @ 2.5 second interval. however, slideshow in top of webpage, stretches picture. attempting set image size full , use image sprites align image liking. slideshow working images remain stretched. there way make images in slide show not stretch?
here code:
<head> <style type="text/css"> .bgpic { height: 50%; width: 100%; } #pict { width: 100%; height: 100%; background: url('/junk/1.jpg') 0 -150px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style> <script type="text/javascript"> var image1 = new image() image1.src="/junk/1.jpg"; var image2 = new image() image2.src="/junk/2.jpg"; var image3 = new image() image3.src="/junk/3.jpg"; </script> </head> <body> <div class="bgpic"> <img src="/junk/1.jpg" id="pict" name="slide" style="-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"> <script type="text/javascript"> var step=1; function slideit() { if(!document.images) return; document.images.slide.src=eval("image"+step+".src") document.getelementbyid("pict").style.backgroundsize="cover"; if (step<3){ step++; } else { step=1; } settimeout("slideit()", 2500) } slideit(); </script> </div> </body> nothing have tried has worked. please help.
Comments
Post a Comment