Desvanecimiento en varias clases una tras otra, control deslizante (imagen de fondo) - javascript, jquery, css, wordpress

Estoy tratando de crear un control deslizante de fondo para un sitio web de wordpress. Es un control deslizante de ancho completo, y tiene cuatro diapositivas. Lo que he hecho es crear 4 clases separadas para cada imagen, y estoy intentando fadeIn Cada clase, una tras otra, después de un intervalo de 5 segundos.

Soy nuevo en esto, por lo que mi código NO es la mejor práctica, estoy seguro, y francamente ni siquiera funciona. Pero aquí está, me pregunto si alguien tiene alguna sugerencia sobre qué otra cosa podría hacer.

if(jQuery(".background").hasClass("image-1")){
jQuery(".image-1").fadeOut(5000, function() {
jQuery(this).removeClass("image-1");
});
jQuery("image-2").fadeIn(5000, function() {
jQuery(this).addClass("image-2");
});
}else if(jQuery(".background").hasClass("image-2")){
jQuery(".image-").fadeOut(5000, function() {
jQuery(this).removeClass("image-2");
});
jQuery("image-3").fadeIn(5000, function() {
jQuery(this).addClass("image-3");
});
}else if(jQuery(".background").hasClass("image-3")){
jQuery(".image-").fadeOut(5000, function() {
jQuery(this).removeClass("image-3");
});
jQuery("image-4").fadeIn(5000, function() {
jQuery(this).addClass("image-4");
});
}

Aquí hay un JSFiddle

Respuestas

en lugar de múltiples, si y si no la declaración puede usar cada bucle en jQuery Aquí está el código de ejemplo. Esto puede ayudarte.

var i =1;
jQuery(".background").each(function(){
if(jQuery(this).hasClass("image-"+i)){
jQuery(".image-"+i).fadeOut(5000, function() {
jQuery(this).removeClass("image-"+i);
});
jQuery("image-"+(i+1)).fadeIn(5000, function() {
jQuery(this).addClass("image-"+(i+1));
});
}
});

Descubrí una mejor manera con la ayuda de un amigo. Hizo tres divs, creó este código para atenuarlos dentro y fuera en intervalos de 3 segundos.

    $(document).ready(function() {
var imgcnt = 3;
var curimage = 1;

imageinterval = setInterval(function() {
var newimg;
if (curimage == imgcnt) newimg = 1;
else newimg = curimage + 1;

$("#image" + curimage).fadeToggle(1000);
$("#image" + newimg).fadeToggle(1000);
curimage = newimg;

}, 3000);
});

No estoy seguro de si esto es lo que estás buscando, pero intenta

$(".background").addClass("image-3");

var bg = $(".background");

if ( bg.hasClass("image-1") ){
$(".image-1").fadeOut(5000, function() {
bg.removeClass("image-1").addClass("image-2");
$(".image-2").fadeIn(5000);
});
} else if ( bg.hasClass("image-2") ) {
$(".image-2").fadeOut(5000, function() {
bg.removeClass("image-2").addClass("image-3");
$(".image-3").fadeIn(5000);
});
} else if (bg.hasClass("image-3")) {
$(".image-3").fadeOut(5000, function() {
bg.removeClass("image-3").addClass("image-4");
$(".image-4").fadeIn(5000);
});
}