Need help implementing jQuery For loop to create slider that changes slides by adding new CSS classes

Question

Here's what I have currently:

HTML:

<div class="slides">
    <div class="slide1-img">
    </div>
</div>    

jQuery:

$(function doAnimation(){
    $('.slide1-img').delay(1000).fadeOut(500, function(){
        for(n=1; n<=3; n++){
            $(this).addClass('slide' + n + '-img').fadeIn(500).delay(1000).fadeOut(500)
        };
    });
});

CSS:

.slides {
width: 100%;
height: 300px;
overflow: hidden;
}

.slide1-img {
background: url(http://us.123rf.com/400wm/400/400/konradbak/konradbak1103/konradbak110300502/9188750-beautiful-lady-with-long-brown-hair.jpg) 0 0 no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}


.slide2-img {
background: url(http://us.123rf.com/450wm/itrifonov/itrifonov1210/itrifonov121000202/15752531-closeup-portrait-of-a-beautiful-young-woman-with-elegant-long-shiny-hair--concept-hairstyle.jpg) 0 0 no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}


.slide3-img {
background: url(http://us.123rf.com/450wm/subbotina/subbotina1307/subbotina130700109/20793602-beauty-woman-touching-her-long-and-healthy-brown-hair.jpg) 0 0 no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}

It currently seems to add the slide2-img and slide3-img classes at the same time, rather than running through each one at a time. I want each of these to run one at a time (so each of the 3 images should fade in and out before the next one shows).

Also, I want this to loop infinitely, so the same 3 pictures will be in rotation.

Answer 1

You're probably trying to do something more like this

$(function() {
    var i = 1;
    (function doAnimation(){
        $('.slide'+i+'-img').delay(1000).fadeOut(500, function(){
            $(this).attr('class', 'slide' + (i = i==3 ? 1 : i+1) + '-img').fadeIn(500, doAnimation);
        });
    })();
});

FIDDLE

just iterating the class with a variable inside a recurring function.

Answer 2

You can do this with setInterval:

var i = 1;
var theImage = $(".slide1-img");

setInterval(function () {
    console.log(theImage[0].className);
    theImage.fadeOut(500, function () {
       $(this).removeClass().addClass('slide' + i + '-img').fadeIn(500); 
    });

    i++;

    if (i === 4) {
       i = 1;
    }
}, 2000);

Fiddle