Home/ Questions/Q 1003245
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T07:57:01+00:00

I have the following javascript. It works well when I am cycling between 2

  • 0

I have the following javascript. It works well when I am cycling between 2 images, but when I add a third it does not work correctly.

Here is my CSS:

img {
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 2s;
    position: absolute;
    width: 320px;
    height: auto;
}

img.fade-out {
    opacity: 0;
}

img.fade-in {
    opacity: 1;
}

Here is my javascript, which seems to work but seems laggy and definately not an elegant solution.

</head><body style="color: black">
<img id="one" class="fade-out" src="Wallpaper.png"/>
<img id="two" class="fade-out" src="Wallpaper0.png"/>
<img id="three" class="fade-out" src="Wallpaper1.png"/>

    <script>
        var images = ['Wallpaper.png', 'Wallpaper0.png', 'Wallpaper1.png'];
        var index = 0;

        var fade_in = one;
        var fade_out = two;
        var fade_foo = three;

        fade_in.src = images[0];
        fade_out.src = images[images.length - 1];

        var fade = function () {
            fade_in.src = images[index];
            index = (index + 1) % images.length;

            fade_in.className = 'fade-out';
            fade_out.className = 'fade-in';
            fade_foo.className = 'fade-out';

            var fade_tmp = fade_in;
            fade_in = fade_out;
            fade_out = fade_foo;
            fade_foo = fade_tmp;

            setTimeout(fade, 15000);
        };

        fade();
</body></html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It seems you’re only displaying one image at a time, so you don’t need two variables, one will do. You just need to fade out the current image and bring in a new image:

    var index = -1, count = /* total number of images */;
var image = null;

function fade() {
  if (image != null)
    image.className = 'fade-out';

  index = (index + 1) % count;
  image = document.getElementById('image-' + index);
  image.className = 'fade-in';

  setTimeout(fade, 15000);
}

fade();

    This assumes that you have set up all the images in HTML as follows:

    <img id="image-0" class="fade-out" src="..." />
<img id="image-1" class="fade-out" src="..." />
<img id="image-2" class="fade-out" src="..." />
...

    Note that you can achieve cross-fading only if you have several images preloaded, as in the above example. If you use only one image and change the source, the previous image will be lost when you try to fade in the new one.

    • 0