0

Dei uma pesquisada em várias perguntas do tipo, tanto em inglês quanto em português e não consegui fazer, pois não consegui entender a lógica para deixar o slider do meu site animado, com as imagens "deslizando" para o lado. Alguém poderia me ajudar?

o HTML:

<div class="row">
<div class="eight columns all">
    <img id="img-slide">
    <img src="img/seta2.png" class="slide-seta" id="prev">
    <img src="img/seta1.png" class="slide-seta" id="next">

as funções em JS:

function slide1(){
    document.getElementById('img-slide').src="img/slide_1.jpg";
    setTimeout("slide2()", 2500);
}

function slide2(){
    document.getElementById('img-slide').src="img/slide_2.jpg";
    setTimeout("slide3()", 3000);
}

function slide3(){
    document.getElementById('img-slide').src="img/slide_3.jpg";
    setTimeout("slide1()", 3000);
}

e o CSS:

#img-slide{
    margin:15px;
    height: 95%;
    width:95%;
    border-radius:5px;
}

Atualmente está funcionando desta forma: www.gabrielozzy.com/site-amor

Como ja disse pesquisei muito em diversos sites e não consegui compreender a lógica, por isso não consegui fazer. Alguém poderia me ajudar? Gostaria de usar javascript puro.

1 Resposta 1

1

Bom, vou postar um exemplo simples, que serve para fins de estudo:

Uma das formas de resolver o problema é imaginar que temos várias imagens que vão passar por uma "janela", que nada mais é que uma div que irá permitir a visibilidade de uma imagem por vez.

Segue o CSS:

img{
    position:absolute;
    width:100%;
    height:100%;
    margin-left:100%;

    -webkit-transition: margin-left 500ms ease-in;
    -moz-transition: margin-left 500ms ease-in;
    -o-transition: margin-left 500ms ease-in;
    transition: margin-left 500ms ease-in;
}
div{
    overflow:hidden;
    position: relative;
    width:350px;
    height:200px;
}
.ativa{
    margin-left:0%;
}

A estrutura HTML:

<div id="container">
   <img src="imagem1.jpg" class="ativa">
   <img src="imagem2.jpg">
   <img src="imagem1.jpg">
</div>

E finalmente, o JS com os devidos comentários:

var proximaImagem = 1;//guarda a posição da imagem que deve entrar na tela, no caso é a imagem da posição 1, pois a imagem 0 já está visível na tela
var zIndexAtual = 0;//usado para criar um aumento progressivo no z-index
var imagens = document.getElementById("container").children;//pega todos os nodos filhos da div #container, ou seja, nossa coleção de imagens

function avancarImagem(){
    imagem = imagens[proximaImagem];//armazena a proxima imagem na fila em uma variável
    imagem.style.zIndex = ++zIndexAtual;//aumenta o índice do z-index e atribui à próxima imagem da fila
    imagem.style.marginLeft = "0%";//reseta a margem da imagem, fazendo ela entrar na tela

    proximaImagem++;//ajusta o índice que aponta a próxima imagem

    //caso o índice tenha alcançado o fim da fila, resetá-lo
    if(proximaImagem >= imagens.length){
        proximaImagem = 0;
    }

    //aqui está o truque para fazer com que as imagens que já passaram voltem para fora da área visível
    //o tempo de intervalo está aqui para que isso ocorra depois que a imagem ficou atrás da nova imagem da fila
    setTimeout(resetarImagens,500);
}

function resetarImagens(){
    imagemVisivel = proximaImagem -1;

    //se o índice alcançou o início da fila, voltar para o final
    if(imagemVisivel < 0){
        //o menos 1 está aqui pois o parâmetro length retorna o total de itens no array (no caso, 3)
        //precisamos da posição do último item do array (sempre é length-1)
        imagemVisivel = imagens.length - 1;
    }

    //retorna todas as imagens à sua posição original, menos a imagem visível
    for(var i = 0; i < imagens.length; i++){
        if(i != imagemVisivel){
            imagens[i].style.marginLeft = "100%";
        }
    }
}

var intervalo = setInterval(avancarImagem,2000);

Espero que seja útil no seu aprendizado.

1
  • Não foi bom, foi perfeito ! Melhor impossível ! Muito obrigado ! Commented 23/04/2015 às 22:34

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 .