Menu
I want to change images every few seconds, this is my code:
<?xml version = "1.0" encoding = "utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>change picture</title> <script type = "text/javascript"> function changeImage() { var img = document.getElementById("img"); img.src = images[x]; x++; if(x >= images.length){ x = 0; } var timerid = setInterval(changeImage(), 1000); } } var images = [], x = 0; images[0] = "image1.jpg"; images[1] = "image2.jpg"; images[2] = "image3.jpg"; </script> </head> <body onload = "changeImage()"> <img id="img" src="startpicture.jpg"> </body> </html> My problem is its stuck on the first picture!
I also wanted to try flipping through the pictures with previous and next buttons but I have no idea how to do that.
694
An easy way to delay loading images (and iFrames) is with a combination of pure JS, jQuery. data() and the custom HTML5 data-* attribute. The src of the image initially can point to a loading GIF. The data-* attribute contains the URL path of the image you ultimately want to load.
Answer: Use the CSS background-image property You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
If your image doesn't fit the layout, you can resize it in the HTML. One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
As I posted in the comment you don't need to use both setTimeout() and setInterval(), moreover you have a syntax error too (the one extra }). Correct your code like this:
(edited to add two functions to force the next/previous image to be shown)
<!DOCTYPE html> <html> <head> <title>change picture</title> <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] = "image1.jpg"; images[1] = "image2.jpg"; images[2] = "image3.jpg"; </script> </head> <body onload = "startTimer()"> <img id="img" src="startpicture.jpg"/> <button type="button" onclick="displayPreviousImage()">Previous</button> <button type="button" onclick="displayNextImage()">Next</button> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
