Slider does not work clearInterval function when clicking the next button back to previous photo

Question

Slider does not work clearInterval function when clicking the next button back to previous photo

Navigation

#1 by (0 votes)
#2 by (0 votes)

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);
}

javascript

asked by anonymous 01.11.2017 / 02:44

2 answers

Heroku Server does not recognize my CSS and Javascript files How do I get the id of the button clicked on a row of result listings by Angular JS?

score 0 · Answer 1

You just forgot to declare var interval globally.

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><divid="b2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNBH9qYupzMRbEK9XFWwHeP9gQyjtMGVoiLGP7eu4PDHqGU2sH"/></div><divid="b3">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnWaPlh6j_fPgYMtW9Xv-IE0XMLIYC5SfMNfTdR_MJKXDqEMEP"/></div></div><buttononclick="anterior()"> voltar </button>
<button onclick="next()"> avancar </button>

score 0 · Answer 2

I changed your code a bit to avoid code repetition, but basically what was happening was that in the troca function you displayed the slide and then selected the next slide, but in next and anterior you first selecting the slide to display and then displaying it.

So what happened was that you displayed slide 3 and marked the next one as 1, but when the user clicked to display the next one, you selected the next one to be 2 (why you increase% with% from 1 to 2 ) and displays it.

Below is a snippet with the code working.

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>