2

Tenho 4 imagens: uma imagem sobre a outra dentro de uma div. Está uma sobre a outra porque está em posição absolute. Gostaria de fazer um slideshow simples, apenas para aprender o seu funcionamento básico dentro de um loop. O que está errado no código abaixo?

(Nota: O código todo está disponível aqui)

$(document).ready(function() {

    for ($n = 0; $n < 3; $n++) {
        $('img:eq($n)').fadeToggle().delay(3000).fadeToggle();
    }      
});

1 Resposta 1

4

Eu creio que não está à procura de um loop, mas sim de um setInterval:

$('.item:gt(0)').hide(); // esconder todos os items cujo index é maior que 0, só o primeiro fica visível
var countItems = $('.item').length; // num de .item que temos
var next;
var slide = setInterval(function() {
    next = $('.item:visible').index() + 1; // ver qual é o item que está visivél, saber o seu index e somar um, que vai ser o proximo .item a aparecer
    if(next >= countItems) { // caso o next seja maior ou igual do que o numero total de .item
    	next = 0; // o proximo .item a aparecer vai ser o primeiro, cujo index é 0
    }
    $('.item').fadeOut();
    $('.item:eq(' +next+ ')').fadeIn(); // aparecer o proximo .item, definido pela var next
}, 1500); // definir tempo entre cada slide
.item {
  position:absolute;
  width:100%;
  height:200px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="marco">
  <div class="item" style="background-image: url(https://i.ytimg.com/vi/5UmFIcqYO9w/hqdefault.jpg)">
  
  </div>
  <div class="item" style="background-image: url(https://i.ytimg.com/vi/mi6Yb_HPS9A/hqdefault.jpg)">
  
  </div>
  <div class="item" style="background-image: url(https://i.ytimg.com/vi/0MyTHD24HKs/hqdefault.jpg)">
  
  </div>
  <div class="item" style="background-image: url(https://i.ytimg.com/vi/hQTsb64ZuFo/hqdefault.jpg)">
  
  </div>
</div>

EXEMPLO no jsfiddle, desta maneira todos vão ter as mesmas dimensões, basta ajustar o comprimento (width) e altura (height) que quer em .item

1
  • Olha! Valeu! Isso me deu uma nova maneira de pensar meus códigos! Realmente funciona melhor!
    – Fiel
    Commented 9/06/2016 às 0:27

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 .