NTM NTM - 4 months ago 21
HTML Question

Slideshow transition - Javascript

I'm trying to do a slideshow gallery in Javascript, but it doesn't work... When I run this code, the

src
goes to
veyron.jpg
instantly, skipping the
lamborghini.jpg
.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="img" src="ferrari.jpg" />
<script>
img = document.getElementById("img");
images = new Array("ferrari.jpg","lamborghini.jpg","veyron.jpg");
end = images.length -1;

window.onload = setInterval(slide,1000);
function slide(){
for(i=0;i<=end;i++){
img.src = images[i];
}
}
</script>
</body>
</html>

Answer

why loop is exist here, you are casting all the images in all.

Do it with increment variable with start

 <script>
            var img = document.getElementById("img");
            var images = new Array("ferrari.jpg","lamborghini.jpg","veyron.jpg");
            var end = images.length -1;
            var start = 0;
            window.onload = setInterval(slide,1000);        
            function slide(){
               img.src = images[start%end];
               start++;
            }
 </script>

example fiddle

Comments