0

Queria fazer uma galeria simples, só para passar imagens que estão dentro de uma pasta, mas seriam varias pastas, com um numero de imagens diferentes então teria que ser automático.Meu código está assim:

JavaScript:

function forward(){
    document.getElementById("img").src="diretorio";
}
function back(){
    document.getElementById("img").src="diretorio";
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/galery.css">
    <script language="JavaScript" src="js/galery.js"></script>
</head>
<body>
        <center><img id="img" src="" style="border: solid 50px grey;"></center>
        <div style="position: absolute; color: white; left: 45%; cursor: pointer;"><h1 onclick="back()"><<</h1></div>
        <div style="position: absolute; color: white; left: 50%; cursor: pointer;"><h1 onclick="forward()">>></h1></div>
</body>
</html>
1
  • 1
    para ser automatico, vai precisar de uma linguagem serverside, tipo PHP, ou qualquer outra. Ja esta usando alguma coisa server side? Commented 12/06/2017 às 22:22

1 Resposta 1

1

Galeria auto com Javascript puro DEMO

CSS

* {margin: 0; padding: 0;}
body {background: #000}
a,img {border: none;}
.trs {-webkit-transition:all ease-out 0.5s;
    -moz-transition:all ease-out 0.5s;
    -o-transition:all ease-out 0.5s;
    -ms-transition:all ease-out 0.5s;
    transition:all ease-out 0.5s;}  
#slider {position: relative; z-index: 1;}
#slider a { position: absolute; top: 0; left: 0; opacity: 0;filter:alpha(opacity=0);}
.ativo {opacity: 1!important; filter:alpha(opacity=100)!important;}

/*controladores*/
span {background: #0190EE; cursor: pointer; opacity: 0;filter:alpha(opacity=0); position: absolute; bottom: 40%; width: 43px; height: 43px; z-index: 5;}
.next {right: 10px;}
.next:before,.next:after {left: 21px;}
.next:before {
    -webkit-transform: rotate(-42deg);
    top: 5px;
}
.next:after {
    -webkit-transform: rotate(-132deg);
    top: 19px;
}
.next:before,.next:after,.prev:before,.prev:after {content: "";
    height: 20px;
    background: #fff;
    width: 1px;
    position: absolute;
}
.prev {left: 10px;}
.prev:before,.prev:after {left: 18px;}
.prev:before {
    -webkit-transform: rotate(42deg);
    top: 5px;
}
.prev:after {
    -webkit-transform: rotate(132deg);
    top: 19px;
}

figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}

figure {
    max-width: 640px;
    height: 480px;
    position: relative;
    overflow: hidden;
    margin: 50px auto;
}

figcaption {padding-left: 20px;color: #fff; font-family: "Kaushan Script","Lato","arial"; font-size: 22px; background: rgba(1, 144, 238, 0.76); width: 100%; position: absolute; bottom: 0; left: 0; line-height: 55px; height: 55px; z-index: 5}

Para que as imagens fiquem bem encaixadas altere max-width: 640px; e height: 480px; nesse trecho de código CSS

figure {
    max-width: 640px;
    height: 480px;
    position: relative;
    overflow: hidden;
    margin: 50px auto;
}

Javascript

function setaImagem(){
    var settings = {
        primeiraImg: function(){
            elemento = document.querySelector("#slider a:first-child");
            elemento.classList.add("ativo");
            this.legenda(elemento);
        },

        slide: function(){
            elemento = document.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }

        },

        proximo: function(){
            clearInterval(intervalo);
            elemento = document.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }
            intervalo = setInterval(settings.slide,4000);
        },

        anterior: function(){
            clearInterval(intervalo);
            elemento = document.querySelector(".ativo");

            if(elemento.previousElementSibling){
                elemento.previousElementSibling.classList.add("ativo");
                settings.legenda(elemento.previousElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");                     
                elemento = document.querySelector("a:last-child");
                elemento.classList.add("ativo");
                this.legenda(elemento);
            }
            intervalo = setInterval(settings.slide,4000);
        },

        legenda: function(obj){
            var legenda = obj.querySelector("img").getAttribute("alt");
            document.querySelector("figcaption").innerHTML = legenda;
        }

    }

    //chama o slide
    settings.primeiraImg();

    //chama a legenda
    settings.legenda(elemento);

    //chama o slide à um determinado tempo
    var intervalo = setInterval(settings.slide,4000);
    document.querySelector(".next").addEventListener("click",settings.proximo,false);
    document.querySelector(".prev").addEventListener("click",settings.anterior,false);
}

window.addEventListener("load",setaImagem,false);

Html

<figure>
   <span class="trs next"></span>
   <span class="trs prev"></span>

   <div id="slider">
      <a href="#" class="trs">
        <img src="diretorio/nome-da-imagem.ext" alt="" title="" /></a>
      <a href="#" class="trs">
        <img src="diretorio/nome-da-imagem.ext" alt="" title="" /></a>
    <a href="#" class="trs">
        <img src="diretorio/nome-da-imagem.ext" alt="" title="" /></a>
    <a href="#" class="trs">
        <img src="diretorio/nome-da-imagem.ext" alt="" title="" /></a>
    <a href="#" class="trs">
        <img src="diretorio/nome-da-imagem.ext" alt="" title="" /></a>
    <!-- tantas imagens quantas forem necessárias -->   
   </div>

   <figcaption></figcaption>
</figure>

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 .