Pessoal, estou fazendo um código aqui, e estou com uma dúvida! Tenho o seguinte código:

Código:

var images = ['image-1.jpg','image-2.jpg','image-3.jpg','image-4.jpg','image-5.jpg','image-6.jpg'],
   index = 0,
   maxImages = images.length - 1;
var timer = setInterval(function() {
   var curImage = images[index];
   index = (index == maxImages) ? 0 : ++index;

   $('.header').css({'background-image':'url(./img/'+curImage+')'});

}, 1500);

Ele faz um "fader de imagens" em uma div que tenho no meu documento.. Porém, o efeito é muito 'seco', gostaria de ter uma transição durante a troca das imagens, tipo o efeito "fade" do jQuery.. Sabem como eu poderia fazer?

@Edit: Aqui um fiddle com um efeito usando o código: http://jsfiddle.net/Wagner/WHhua/embedded/result

Achei esse exemplo aqui que pode ser útil 

http://s.codepen.io/leemark/fullgrid/vzCdo

será que fica legal?

Achei meio esquisito a maneira que foi feito (abusou um pouco animation do CSS3), mas o resultado ficou bom no meu pc, em pc com poucos recursos não sei não.

Bem interessante.. Mas será que não vou ter problemas com browsers antigos?

Com certeza vai, veja aqui a lista dos browsers que suportam, e da qual versão eles começão a suportar esses efeitos

http://www.w3schools.com/css/css3_animations.asp

Se bem que hoje em dia quem vai usar firefox menor v16 kkkk

Bom, creio que não seja interessante para mim ficar dando suporte para nego que não atualiza o navegador nesse caso :S
É apenas para um pequeno efeito para ficar trocando a imagem de fundo do meu header.. Você sabe alguma solução usando Javascript ou jQuery mesmo que seja usando um código diferente do meu? To pensando em usar algum slider da internet, mas queria saber se você conhece algo antes

Vou fazer um exemplo aqui pra você, eu até já tinha feito um meio na correria ontem, só que queria esse "crossfade" entre as imagens para ficar elegante, ai o meu ficou sem os crossfade ai deletei vou tentar fazer de novo.

deletei o que eu tinha feito ontem kkk.

Putz kkkk, bom de qualquer forma, ficarei no aguardo amigo, obrigado pela atenção

Como prometi está aqui o exemplo, não é tão chique como os sliders que tem por ai na internet,mas é eu achei que ficou legal, deve ter alguns ajustes fiz com um pouco de pressa, mas o esqueleto está ai espero que seja útil a alguém


Vou postar somente o código javascript

fiz em javascript puro para tentar mostrar um pouco de como seria dessa maneira, mas podem adaptar e modifica a vontade.

Código:


/*----------------------------------------------------------
slideShow()
Copyright(c) 2013-2014 jscript.forumeiros.com
Author:joelson0007
OBS:pode retirar os créditos, sempre que puder
cite nosso fórum para seus amigos.
-----------------------------------------------------------*/
function slideShow(/*Array*/ aPics, duration, transition) {
   var d = duration || 5 , t = transition || 2, doc = document, cont = true;
   var byId = function (e) {
       return doc.getElementById(e)
   };
   var crossFade = function (el) {
       var len = el.length;
       setInterval(function () {
           if (cont) {
               var max = el.length - 1;
               if (--len <= 0) {
                   for (var i = 0; i < max + 1; i++) {
                       el[i].className = 'pic';
                   }
                   len = max + 1;
               } else {
                   el[len].style.cssText = 'transition:opacity ' + t + 's;';
                   el[len].className = 'pic hide';
               }
           }
       }, d * 1000)
   };
   aPics.forEach(function (i, c, x) {
       var pic = new Image();
       pic.src = i;
       pic.className = 'pic';
       pic.onmouseover = function () {
           cont = false
       };
       pic.onmouseout = function () {
           cont = true
       };
       pic.onload = function () {
           var hold = byId("holderSlider");
           hold.appendChild(this);
           if (!--x.length) {
               var preload = byId("preloading");
               preload.style.opacity = 0;
               hold.style.opacity = 1;
               setTimeout(function () {
                   preload.style.display = "none";
                   crossFade(doc.querySelectorAll('div img.pic'));
               }, 5000);
           }
       }
   });
}
//coloquei a array fora como variavel ,mais pode ser chamada dentro da função
/*coloquei as imagens externas para mostrar como preloading funciona e
que as imagens somente são mostradas após o carregamento deixando um
efeito mais agradável o slider*/
var arrPics = [
    "http://i2.minus.com/jvSDQ4WRvywhu_e.jpg",
    "http://i6.minus.com/jerAH84Aihgvo_e.jpg",
    "http://i2.minus.com/jHW2pN6QkX7fY_e.jpg",
    "http://i2.minus.com/jKZ4ejm1QV0Id_e.jpg",
    "http://i3.minus.com/jbvWHolbiSX9h2_e.jpg",
    "http://i6.minus.com/jEjDlObVdfYsP_e.jpg",
    "http://i2.minus.com/jZTnLQFCjoXi7_e.jpg",
    "http://i6.minus.com/j5rd9bod61sDM_e.jpg",
    "http://i5.minus.com/j77Ldmyto5MP0_e.jpg"
];
window.addEventListener("DOMContentLoaded", function () {
   /*
    *   Parameters -> slideShow(type Array (required), type integer(optional),type integer(optional))
    *   nesse exemplo uso 5 segundos de duração cada foto e um transição de 2 segundos
    */
   slideShow(arrPics, 3, 2);
});


baixe o exemplo e execute no navegador 

Obs: ao colocar o mouse sobre uma imagem o slider para, e isto é de propósito e não um bug

Baixar exemplo completo

Até mais.

A cada dia me impressiono mais com seus conhecimentos amigo.. Ficou excelente seu código, muito obrigado

Olha outro jeito que aprendi a fazer aqui amigo, o que acha?

Código:

var bg = ["img/img-1.jpg","img/img-2.jpg","img/img-3.jpg","img/img-4.jpg"];
var bgactual = 0;

function bgchange() {
  bgactual = ( bgactual + 1 ) % 4;
  document.querySelector('div').style.background = "url('" + bg[bgactual] + "')";
}
setInterval( bgchange, 1000 );

E um transition na div

Código:

transition: all linear 1s;

Mas tem um pequeno "bug" na hora que troca a primeira imagem xD

Tem tudo pra ser melhor que o meu já que está bem menor o código, a hora que tiver um tempo vou ver bem com calma.

até mais amigo.