不能让我的下一个按钮在JavaScript中滑动

Question

嗯，我有一个很难的问题。我尽力解决它，但似乎一切正常。我得到了一个3个imgs的滑块横幅。我可以让自动滑动，但我的下一个/ prev按钮不起作用。现在我只是在下一个按钮上工作，并且我无法在滑块结束后回到第一个图像。看：

这是HTML这里我把图片：

<div class="eight columns all" id="imdivs"> 
    <img src="img/slide_1.jpg" class="img-slide ativa"> 
    <img src="img/slide_2.jpg" class="img-slide"> 
    <img src="img/slide_3.jpg" class="img-slide"> 
    <!--<p>>></p> --> 
</div> 

<!-- The nav buttons --> 
<div class="eight columns"> 
    <img src="img/seta2.png" class="slide-seta" onclick="voltaSlide();"> 
    <img src="img/seta1.png" class="slide-seta" id="btn-nxt" onclick="avancaSlide();"> 
</div> 

，使得它自动更改JavaScript的：

var proximaImagem = 1;//this is the var where i keep the value of the next img 
    var zIndexAtual = 0;//this is the initial zIndex value 

    function avancarImagem(){ 
     var imagens = document.getElementById("imdivs").children;//here i get all the html under the div imdivs 
     var imagem = imagens[proximaImagem];//and here is the var that kepts the value of the next img 
     imagem.style.zIndex = zIndexAtual++;//i add 1 to the zIndex value of the next img 
     imagem.style.marginLeft = "0%";//and bring the img to the center 

     proximaImagem++;//add 1+ to bring the next img to the var imagem 


     if(proximaImagem >= imagens.length){//if i get to the end of the imgs 
      proximaImagem = 0;//bring it to the start again 
     } 


     setTimeout(resetarImagens,2000);//this function reset the value of the imgs 
    } 

    function resetarImagens(){ 
     var imagemVisivel = proximaImagem -1;//this var brings the visible img 


     if(imagemVisivel < 0){//if the var is lower than 0(because we make proximaImagem value 0 when it cames to the end) 

      imagemVisivel = imagens.length - 1;//the var will be the last img of the slider 
     } 


     for(var i = 0; i < imagens.length; i++){ 
      if(i != imagemVisivel && i !=proximaImagem){ 
       imagens[i].style.marginLeft = "-100%";/* 
        decrescent a value of the zIndex and take the img away 
       */ 
       imagens[i].style.zIndex = zIndexAtual--; 
      } 
      //this is used to bring the imgs back to the right side of the screen, when i need to 
      if(proximaImagem == 0 && i != imagemVisivel){ 
       imagens[0].style.marginLeft = "100%"; 
       imagens[0].style.zIndex = zIndexAtual--; 
      } 
      if(proximaImagem == 1 && i != imagemVisivel){ 
       imagens[1].style.marginLeft = "100%"; 
       imagens[1].style.zIndex = zIndexAtual--; 
      } 
      if(proximaImagem == 2 && i != imagemVisivel){ 
       imagens[2].style.marginLeft = "100%"; 
       imagens[2].style.zIndex = zIndexAtual--; 
      } 
     } 
    } 

var intervalo = setInterval(avancarImagem,4000);//and i make it all every 4s 

而接下来的按钮功能，这是不工作：

//everything here is more of the same 
    var imgsSlide = document.querySelector("#imdivs").children; 
    var proxImg = imgsSlide[proximaImagem];//here i take the next img 
    var imgAtual = imgsSlide[proximaImagem -1];//and here the img that will fade away 

     imgAtual.style.zIndex = zIndexAtual--; 
     imgAtual.style.marginLeft = "-100%"; 

     proxImg.style.zIndex = zIndexAtual++; 
     proxImg.style.marginLeft = "0%"; 

     proximaImagem++; 


if(proximaImagem >= imgsSlide.length){//when the value get to the end of the array 
    proximaImagem = 1;//make it go back to 1 
} 

      if(proximaImagem == 1){ 
       imgAtual = imgsSlide[0]; 
      } 
      console.log("Imagem atual: " + imgAtual); 
      console.log("Próxima imagem: " + proximaImagem); 
      console.log("Proxima Imagem html: " + proxImg); 
      console.log("Div children: " + imgsSlide); 

但是当它到达数组的最后一个img时，它会带来msg“imgAtual is undefin编辑“，我不知道为什么会发生这种情况，因为它与其他函数基本相同。有人能帮我吗 ？下面是用的console.log网站：www.gabrielozzy.com/site-amor

Answer 1

在你们的if语句：

if(proximaImagem >= imgsSlide.length){//when the value get to the end of the array 
    proximaImagem = 0;//make it go back to 0 
} 

这意味着proximaImagem可能是0。因此，在你的代码在这里堵0：

var imgAtual = imgsSlide[proximaImagem -1]; 

将意味着你正在做的0-1这是imgsSlide[-1]索引无效。制作imgAtual未定义。更改上面的代码，以便它去1代替：

if(proximaImagem >= imgsSlide.length){//when the value get to the end of the array 
    proximaImagem = 1;//make it go back to 1 
} 

注：看来proximaImagem从1..n去。因此，您也可以将条件从>=更改为>。