5

Tenho um elemento figure com uma série de imagens dentro:

<figure class="MiniModImgSlider">
  <img src="img01.jpg" alt="img01">
  <img src="img02.jpg" alt="img02">
  <img src="img03.jpg" alt="img03">
  <img src="img04.jpg" alt="img04">
  <img src="img05.jpg" alt="img05">
</figure>

Obs: As imagens estão com display:none.

Quero recuperar o caminho de cada imagem e atribuir ao background do elemento figure a cada 3 segundos. Para isso fiz esse script:

var imgs = $(".MiniModImgSlider img").map(function() 
{
  return $(this).attr('src');
});

for (var i = 0; i <= imgs.length; i++) 
{
  setInterval(function()
  {
    $(".MiniModImgSlider").css('background-image', 'url('+imgs[i]+')');
  },1000);
}

Só que ao invés de atribuir o caminho da imagem o script retorna undefined! Como posso resolver isso?

Código no JSFiddle

2 Respostas 2

5

Um problema é que você está definindo vários setInterval, um para cada imagem, o que faz com que existam um monte de timers concorrendo para fazer alteração da imagem sendo exibida.

Você não precisa de um for, mas sim, somente de um setInterval com uma variável de controle definida em algum lugar, de forma a saber qual é a próxima imagem a ser exibida.

Exemplo no jsfiddle

var imgs = $(".MiniModImgSlider img")
.map(function()
     {
         return $(this).attr('src');
     });

var imgIndex = 0;
setInterval(function()
            {
                var url = imgs[imgIndex++ % imgs.length];
                $(".MiniModImgSlider")
                .css('background-image', 'url('+url+')');
            },1000);
1
1

No metodo .MAP() você deve passar um parâmento antes de function() Com algumas informação,por exeplo o alt, como uma array com todas as informações que você deseja manipular.

De acordo com a documentação do Jquery.

Ex:

var arr = [1,2,3,4,5];
var imgs = $(".MiniModImgSlider img").map(arr,function(){
    FAZ ALGUMA COISA
};

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .