0
var satual =1;
smax=3;
stmp=3000;

// ocultando os tres imagens e exibindo o 1º
function troca(){
    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="hidden";

    // exibindo imagem atual                    
    document.getElementById("b"+satual).style.visibility="visible";

    satual=satual+1;

    if(satual>smax){
        satual = 1;
    }
}

// funcao de iniciar o slider
function slider(){
    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="visible";

    // chama uma funcao a cada tempo
     interval=setInterval(troca,stmp);
}





function next(){

    clearInterval(interval);

    satual++;

    if(satual>smax){
        satual = 1;
    }

    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="hidden";

    // exibindo imagem atual                    
    document.getElementById("b"+satual).style.visibility="visible";



    interval=setInterval(troca,stmp);
}

function anterior(){

    clearInterval(interval);

    satual--;

    if(satual>smax){
        satual = 1;
    }

    if(satual<1){
        satual=3;
    }

    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="hidden";

    // exibindo imagem atual                    
    document.getElementById("b"+satual).style.visibility="visible";

    interval=setInterval(troca,stmp);
}
1
  • Já tentou trocar setInterval por setTimeout?
    – Sam
    1/11/2017 às 1:49

2 Respostas 2

0

Você apenas se esqueceu de declarar a var intervalde forma global.

var satual =1,
smax=3,
stmp=3000,
interval = null;
// ocultando os tres imagens e exibindo o 1º
function troca(){
    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="hidden";

    // exibindo imagem atual                    
    document.getElementById("b"+satual).style.visibility="visible";

    satual=satual+1;

    if(satual>smax){
        satual = 1;
    }
}

// funcao de iniciar o slider
function slider(){
    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="visible";

    // chama uma funcao a cada tempo
     interval=setInterval(troca,stmp);
}





function next(){

    clearInterval(interval);

    satual++;

    if(satual>smax){
        satual = 1;
    }

    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="hidden";

    // exibindo imagem atual                    
    document.getElementById("b"+satual).style.visibility="visible";



    interval=setInterval(troca,stmp);
}

function anterior(){

    clearInterval(interval);

    satual--;

    if(satual>smax){
        satual = 1;
    }

    if(satual<1){
        satual=3;
    }

    document.getElementById("b1").style.visibility="hidden";
    document.getElementById("b2").style.visibility="hidden";
    document.getElementById("b3").style.visibility="hidden";

    // exibindo imagem atual                    
    document.getElementById("b"+satual).style.visibility="visible";

    interval=setInterval(troca,stmp);
}

slider();
//troca();
#d{
position:relative;
float:left;
}
#b1, #b2, #b3{
  position: absolute;
  top:30px;
  left:0;
  width:300px;
  height:250px;
  overflow:hidden;
}
<div id="d">
<div id="b1">
<img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
</div>

<div id="b2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNBH9qYupzMRbEK9XFWwHeP9gQyjtMGVoiLGP7eu4PDHqGU2sH" />
</div>

<div id="b3">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnWaPlh6j_fPgYMtW9Xv-IE0XMLIYC5SfMNfTdR_MJKXDqEMEP" />
</div>
</div>


<button onclick="anterior()"> voltar </button>
<button onclick="next()"> avancar </button>

0

Eu mudei seu código um pouco para evitar a repetição de código, mas basicamente o que estava acontecendo era que na função troca você exibia o slide e depois selecionava o próximo slide, mas em next e anterior você primeiro selecionava o slide a ser exibido e depois exibia ele.

Então o que acontecia era que você exibia o slide 3 e marcava o próximo como 1, mas quando o usuário clicava para exibir o próximo, você selecionava que o próximo era 2 (por que você incrementa satual de 1 para 2) e exibe ele.

Abaixo tem um snippet com o código funcionando.

var satual = 3;
var smax = 3;
var stmp = 3000;
var interval;

slider();

// funcao de iniciar o slider
function slider() {
  exibeSlide(satual);
  // chama uma funcao a cada tempo
  interval = setInterval(troca, stmp);
}

function exibeSlide(index) {
  document.getElementById("b1").style.visibility = "hidden";
  document.getElementById("b2").style.visibility = "hidden";
  document.getElementById("b3").style.visibility = "hidden";
  // exibindo imagem com index
  document.getElementById("b" + index).style.visibility = "visible";
}

function troca() {
  satual = satual + 1;
  if (satual > smax) {
    satual = 1;
  }
  exibeSlide(satual);
}

function next() {
  clearInterval(interval);
  satual++;
  if (satual > smax) {
    satual = 1;
  }
  exibeSlide(satual);
  interval = setInterval(troca, stmp);
}

function anterior() {
  clearInterval(interval);
  satual--;
  if (satual < 1) {
    satual = 3;
  }
  exibeSlide(satual);
  interval = setInterval(troca, stmp);
}
<div id="b1"><p>1</p></div>
<div id="b2"><p>2</p></div>
<div id="b3"><p>3</p></div>

<a href="#" onclick="anterior()">Anterior</a>
<a href="#" onclick="next()">Próximo</a>

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 .