Question

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

这是我保留图片的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＆＃34; imgAtual未定义＆＃34;，我不知道为什么会发生这种情况，因为它已经发生了与其他功能基本相同。有人能帮我吗？这是带有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。因此，您也可能希望将条件从>=更改为>。

无法使我的下一个按钮在JavaScript中滑动

1 个答案: