setTimeOut without delay

Question

The goal is for the pictures to transition into each other.

I started it off with the first picture having 1 opacity and the other three having a 0 opacity.

How could I go about making it start transitioning from the start and then continuing the transition loop every 12 seconds. I don't want to wait 12 seconds to start the transition

Here is my HTML with inline CSS

    <img id="01BrunetteGirl" style="width:100%; opacity:1;" src="images/brunettesmiling.jpg" alt="">
    <img id="02ManAndWife" style="width:100%; opacity:0;" src="images/manandwife.jpg" alt="" />
    <img id="03GlassesMan" style="width:100%; opacity:0;" src="images/manwithglasses.jpg" alt="">
    <img id="04BlondeGirl" style="width:100%; opacity:0;" src="images/blondegirlsmile.jpg" alt="" />

And here is my Javascript

    <script>
        $(document).ready(function() {
            setInterval(function() {
                setTimeout(function() {
                    document.getElementById("01BrunetteGirl").style.opacity = "0";
                    document.getElementById("02ManAndWife").style.opacity = "1";
                    document.getElementById("03GlassesMan").style.opacity = "0";
                    document.getElementById("04BlondeGirl").style.opacity = "0";
                }, 3000);
                setTimeout(function() {
                    document.getElementById("01BrunetteGirl").style.opacity = "0";
                    document.getElementById("02ManAndWife").style.opacity = "0";
                    document.getElementById("03GlassesMan").style.opacity = "1";
                    document.getElementById("04BlondeGirl").style.opacity = "0";
                }, 6000);
                setTimeout(function() {
                    document.getElementById("01BrunetteGirl").style.opacity = "0";
                    document.getElementById("02ManAndWife").style.opacity = "0";
                    document.getElementById("03GlassesMan").style.opacity = "0";
                    document.getElementById("04BlondeGirl").style.opacity = "1";
                }, 9000);
                setTimeout(function() {
                    document.getElementById("01BrunetteGirl").style.opacity = "1";
                    document.getElementById("02ManAndWife").style.opacity = "0";
                    document.getElementById("03GlassesMan").style.opacity = "0";
                    document.getElementById("04BlondeGirl").style.opacity = "0";
                }, 12000);
            }, 12000);
        });
    </script>

Answer 1

Change your code like below

 var currentImageIndex = 0;
 setInterval(function() {
    var imageArrayIds = ["01BrunetteGirl", "02ManAndWife", "03GlassesMan", "04BlondeGirl"];
    if(currentImageIndex > 3) {
        currentImageIndex = 0;
    }

    for(var index in imageArrayIds) {
        document.getElementById(imageArrayIds[index]).style.opacity = (currentImageIndex == index ? "1" : "0");
    }

    currentImageIndex++;
 }, 3000);

Working Demo

Working Demo with jQuery animate effect

Answer 2

Late, and there's a good accepted answer, but you could build on Kundan's approach and automatically iterate through the images without first defining them in an array. Furthermore, by simply changing the image's classname instead we can move all the presentational properties such as opacity and the animation to the stylesheet thus allowing you to pick and choose the display and animation styles independently of the JavaScript.

View the jsFiddle or check out the snippet below.
Or check out this jsFiddle with different style and animation (but no change to JS)

 var images = document.querySelectorAll("#images img"), i=images.length-1; (function next(){ i++; images[i-1].className=""; if(i>=images.length){i=0;} images[i].className="active"; setTimeout(function(){next();},3000); })();

 #images img{ position:absolute; width:100%; opacity:0; transition: all 1.0s; -moz-transition: all 1.0s; -webkit-transition: all 1.0s; -webkit-transform:rotate(180deg) scale(0.2); transform:rotate(180deg) scale(0.2); } #images img.active { opacity:1; -webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1); }

 <div id="images"> <img src="http://www.placehold.it/200&text=brunettesmiling.jpg" alt="brunette smiling" /> <img src="http://www.placehold.it/200&text=manandwife.jpg" alt="man and wife" /> <img src="http://www.placehold.it/200&text=manwithglasses.jpg" alt="man with glasses" /> <img src="http://www.placehold.it/200&text=blondegirlsmile.jpg" alt="blonde girl smile" /> </div>

FYI. You can do this entirely in CSS . I wouldn't recommend it but its there as an option.

Answer 3

You can set a very small initial delay-time (eg 100) and set it to your desired delay-time within the function:

 var delay = 100; function foo() { document.getElementById("01BrunetteGirl").style.opacity = "1"; document.getElementById("02ManAndWife").style.opacity = "0"; document.getElementById("03GlassesMan").style.opacity = "0"; document.getElementById("04BlondeGirl").style.opacity = "0"; delay = 12000; setTimeout(foo, delay); }