javascript - How to have different images change every second in a Div? -
i have javascript gets images in folder called "pictures/" want code writen can have each div different different images folder tell cant figure out how set up. im knew , appreciate help:
function displayimage(image) { document.getelementbyid("img").src = image; document.getelementbyid("img2").src = image; document.getelementbyid("img3").src = image; } function displaynextimage() { x = (x == images.length - 1) ? 0 : x + 1; displayimage(images[x]); } function displaypreviousimage() { x = (x <= 0) ? images.length - 1 : x - 1; displayimage(images[x]); } function starttimer() { setinterval(displaynextimage, 1000); } var images = [], x = -1; images[0] = "pictures/" + "1.jpg"; images[1] = "pictures/" + "2.jpg"; for(var y=2;y<4;y++){ images[y]= "pictures/" + (y+1) + ".jpg"; }
html:
<div><img id="img" src="pictures/1.jpg">7</div> <div><img id="img2" src="pictures/1.jpg">8</div> <div><img id="img3" src="pictures/1.jpg">9</div>
in displayimage() method pass index of image rather image
and change value of index such should not cause arrayoutofboundindex error
then displayimage() method this
function displayimage(imageindex) { document.getelementbyid("img").src = images[x]; document.getelementbyid("img2").src = images[x+1]; document.getelementbyid("img3").src = images[x+2]; }
Comments
Post a Comment