I have the following code used for displaying several images changed on hover, but i also would like to add a feature that changes the image automatically if i dont do it manually.
".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage"
/>
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height="79" width="78"
onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100"
onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79"
onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
What i want to do is automatically change the images displayed using javascript preferrably. How can i do that?
I have the following code used for displaying several images changed on hover, but i also would like to add a feature that changes the image automatically if i dont do it manually.
"http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage"
/>
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height="79" width="78"
onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100"
onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79"
onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
What i want to do is automatically change the images displayed using javascript preferrably. How can i do that?
Share Improve this question edited Feb 24, 2012 at 22:00 Birdman 7245 silver badges9 bronze badges asked Feb 24, 2012 at 20:57 Johnny HankgardJohnny Hankgard 4692 gold badges6 silver badges12 bronze badges 2- you can make it with an interval that calls a function to change the pic periodically – Sven Bieder Commented Feb 24, 2012 at 21:00
- okey can you tell me more. im not any good at javascript unfortunately – Johnny Hankgard Commented Feb 24, 2012 at 21:02
3 Answers
Reset to default 1Use setInterval to run a function that changes the image src.
var x = 0;
var images = new Array("../Pictures/lightcircle2.png","../Pictures/lightcircle.png");
var i = setInterval(auto, 3000);
function auto()
{
x++;
if (x == images.length)
x=0;
document.getElementById('bigImage').src=images[x];
}
This should help you:
http://www.switchonthecode./tutorials/javascript-tutorial-using-setinterval-and-settimeout
Sounds like you want a carousel. If so, try this.
Add this to your JavaScript
// The list of images you want to cycle through
var imageRotation = [
'../Pictures/lightcircle.png',
'../Pictures/lightcircle2.png'
];
// The current image being displayed
var currentImage = 0;
// A variable to hold the timer
var t;
// Call this to automatically start rotation. Currently set for a 5 sec rotation
function startCarousel(){
t=setInterval(changeCarousel,5000);
}
// Moves to the next picture
function changeCarousel(){
// Change to the next image
currentImage++;
// If there isn't a next image, go back to the start
if (currentImage == imageRotation.length) currentImage = 0;
// Change the image
document.getElementById('bigImage').src=imageRotation[currentImage];
}
Then modify your function to
function changeImage(img){
// Stops the rotation
clearInterval(t);
// Assigns currentImage to the image they selected
currentImage = imageRotation.indexOf(img);
// Swap the image
document.getElementById('bigImage').src=imageRotation[currentImage];
// Start the rotation again in 10 sec
setTimeout(startCarousel, 10000);
}