1

Para exemplificar o que estou querendo, observe a figura:


Screen Shot

Para isso coloco o código fonte para exemplo:


Código

<html>

<head>

<style type="text/css">
#slide #screenshot {
width: 480px;
height: 360px;
border: solid 3px #333;
}

#slide a {
border: solid 1px #333;
background-color: #F7F7F7;
padding: 5px;
text-decoration: none;
color: #000;
}

#slide a:hover {
border: solid 1px #333;
text-decoration: underline;
background-color: #333;
color: #FFF;
}

#slide a.hover {
background-color: #333;
color: #FFF;
}

#slide #controle {
width: 480px;
height: 360px;
text-align: center;
padding-top: 15px;
}
</style>

</head>

<body>

<div id="slide">

<div id="screenshot">

<img src="screenshot/1.jpg" width="480px" height="360px" border="0" alt="Banner">

</div>

<div id="controle">

<a href="#" onclick="troca(1);"> &#171 Anterior </a>&nbsp;&nbsp;

<a href="javascript:void(0);" id="screenshot1" class="hover" onclick="troca('0');">1</a>
<a href="javascript:void(0);" id="screenshot2" onclick="troca('1');">2</a>
<a href="javascript:void(0);" id="screenshot3" onclick="troca('2');">3</a>
<a href="javascript:void(0);" id="screenshot4" onclick="troca('3');">4</a>

&nbsp;&nbsp;<a href="#" onclick="troca(-1);"> Próximo &#187 </a>

</div>

</div>

</body>

<script>
img = ['1', '2', '3', '4']

indice = 0;

function troca(i) {

    if (i == 0 || i == 1 || i == 2 || i == 3) {

        indice = i;

    } else {

        if (indice == img.length - 1) {

            indice = 0;

        } else {

            indice++;

        }

    }
    document.getElementById("screenshot1").setAttribute("class", "");
    document.getElementById("screenshot2").setAttribute("class", "");
    document.getElementById("screenshot3").setAttribute("class", "");
    document.getElementById("screenshot4").setAttribute("class", "");
    document.getElementById("screenshot" + img[indice]).setAttribute("class", "hover");

    document.getElementById("screenshot").innerHTML = "<img src='screenshot/" + img[indice] + ".jpg' width='480' height='360' border='0' alt='snap shot'>";
}
</script>

<html>


Não defini thumbnail nos seguintes links:

<a href="javascript:void(0);" id="screenshot1" class="hover" onclick="troca('0');">1</a>
<a href="javascript:void(0);" id="screenshot2" onclick="troca('1');">2</a>
<a href="javascript:void(0);" id="screenshot3" onclick="troca('2');">3</a>
<a href="javascript:void(0);" id="screenshot4" onclick="troca('3');">4</a>


Preferi deixar por números para detectar eventuais erros, ja que esta em fase de criação.

A minha dificuldade está em fazer a lógica fluxo controle entre "próximo/anterior"

Sei que o problema esta por aqui..

if (indice == img.length - 1) {

indice = 0;

} else {

indice++;

}
4
  • Veja se isso ajuda pt.stackoverflow.com/a/168525/3635 (obs: não fui eu quem negativou e também não entendi o motivo)
    – Reptile
    28/12/2016 às 22:21
  • Não entendi, é video ou foto?
    – Reptile
    28/12/2016 às 22:32
  • Isso esta claro, mas as pessoas (provavelmente) estão esperando tentar entender se você quer passar um video, foto ou outra coisa para criar um exemplo em cima do uso que necessita.
    – Reptile
    28/12/2016 às 22:40
  • Veja se a resposta lhe ajuda
    – Reptile
    28/12/2016 às 22:46

2 Respostas 2

2

Acredito que o código deva ficar assim:

var img = ['1','2','3','4'];

var indice = 0;

function troca(i) {
    //Verifica se o numero esta dentro da quantidade de indices
    if (i < img.length) {
       indice = i;
    } else {
       return;
    }

    document.getElementById("screenshot1").className = "";
    document.getElementById("screenshot2").className = "";
    document.getElementById("screenshot3").className = "";
    document.getElementById("screenshot4").className = "";
    document.getElementById("screenshot" + img[indice]).className = "hover";

    document.getElementById("screenshot").innerHTML = "<img src='screenshot/" + img[indice] + ".jpg' width='480' height='360' border='0' alt='screenshot/" + img[indice] + ".jpg'>";
}

function proximo() {
    //Soma mais 1 e se passar do limite do indice torna 0 novamente
    indice++;

    if (indice >= img.length) {
       indice = 0;
    }

    troca(indice);
}

function anterior() {
    //Subtrai 1, se for menor que 0 move para o ultimo item do indice
    indice--;

    if (indice < 0) {
       indice = img.length - 1;
    }

    troca(indice);
}
.hover {
    padding: 5px;
    background-color: #F00;
    color: #fff;
}
<div id="screenshot">

<img src="screenshot/1.jpg" width="480px" height="360px" border="0" alt="1">

</div>

<a href="#" onclick="anterior();"> &#171 Anterior </a>&nbsp;&nbsp;

<a href="javascript:void(0);" id="screenshot1" class="hover" onclick="troca('0');">1</a>
<a href="javascript:void(0);" id="screenshot2" onclick="troca('1');">2</a>
<a href="javascript:void(0);" id="screenshot3" onclick="troca('2');">3</a>
<a href="javascript:void(0);" id="screenshot4" onclick="troca('3');">4</a>

&nbsp;&nbsp;<a href="#" onclick="proximo();">Próximo &#187</a>

1
  • 1
    Agradeço, desde ja pelo tempo disposto em me ajudar. Coloco o meu voto sobre seu desempenho por finalizar com precisão e atenção. 29/12/2016 às 0:34
2

Altera a sua função troca por essa aqui que deve funcionar. Tente adicionar um JSFiddle que vai ajudar muito.

img = ['1','2','3','4']

indice = 0;

function resetThumbnail () {
	document.getElementById("screenshot1").className = "";
    document.getElementById("screenshot2").className = "";
    document.getElementById("screenshot3").className = "";
    document.getElementById("screenshot4").className = "";
    document.getElementById("screenshot" + img[indice]).className = "hover";
}

function troca(i) {
    indice += i;

    resetThumbnail();

    this.className = 'hover';

    // edit - adicionando um limitador.
    if (indice < 0) {
        indice = 0;
    } else if (indice > img.length - 1) {
        indice = img.length - 1;
    }

    document.getElementById("screenshot").innerHTML = "<img src='screenshot/" + img[indice] + ".jpg' width='480' height='360' border='0' alt='snap shot'>";
}
#slide #screenshot {
width: 480px;
height: 360px;
border: solid 3px #333;
}

#slide a {
border: solid 1px #333;
background-color: #F7F7F7;
padding: 5px;
text-decoration: none;
color: #000;
}

#slide a:hover {
border: solid 1px #333;
text-decoration: underline;
background-color: #333;
color: #FFF;
}

#slide a.hover {
background-color: #333;
color: #FFF;
}

#slide #controle {
width: 480px;
height: 360px;
text-align: center;
padding-top: 15px;
}
<div id="slide">

<div id="screenshot">

<img src="screenshot/1.jpg" width="480px" height="360px" border="0">
    
</div>

<div id="controle">

<a href="#" onclick="troca(-1);"> &#171 Anterior </a>&nbsp;&nbsp;

<a href="javascript:void(0);" id="screenshot1" class="hover" onclick="troca('0');">1</a>
<a href="javascript:void(0);" id="screenshot2" onclick="troca('1');">2</a>
<a href="javascript:void(0);" id="screenshot3" onclick="troca('2');">3</a>
<a href="javascript:void(0);" id="screenshot4" onclick="troca('3');">4</a>

&nbsp;&nbsp;<a href="#" onclick="troca(1);"> Próximo &#187 </a>

</div>

</div>

Eu não entendi o propósito do restante da sua função.

5
  • troca(-1); vai alterar a <img> para o índice anterior, troca(1); para a próxima.
    – relaxeaza
    28/12/2016 às 22:45
  • No seu código a thumbnail tbm não está funcionando?
    – relaxeaza
    28/12/2016 às 23:43
  • Atualizei o código, teste aí.
    – relaxeaza
    28/12/2016 às 23:48
  • Fico contente por ter partilhado comigo um pouco do seu conhecimento, embora não sei o porque ainda, não funcionou como deveria. Mas ficou claro como aprendizado. 29/12/2016 às 0:53
  • Ja descobri o caso do teu código falhar em meus testes. Vou reeditar sua reposta com detalhe exato. Assim ficará para futura pesquisa como a segunda alternativa a esta questão. 29/12/2016 às 1:41

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 .