Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 248
NTM Avatar asked Apr 17 '26 07:04

NTM


1 Answers

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

like image 137
Özgür Ersil Avatar answered Apr 18 '26 19:04

Özgür Ersil