Question

所以基本上我要做的就是制作我自己的图像旋转器

但是有一个计数器功能，当你点击下一个按钮时，计数器从0开始计数器变为1，依此类推，并使用prev按钮做同样的事情，但只是下降

这个想法是每个数字计数器最多可以达到15，显示15个div中的1个

计数器本身正在工作，但当计数器变为1时，它不会隐藏第二个div

    <div class="image-holder" id="image1">
        <img src="image/data/rotator/pic1" alt="">
    </div>

    <div class="image-holder" id="image2">
        <img src="image/data/rotator/pic2" alt="">
    </div>

    <div class="image-holder" id="image3">
        <img src="image/data/rotator/pic3" alt="">
    </div>

<button id="next" type="">Next</button>
<button id="prev" type="">Prev</button>


<script>
    counter = 0;
    /*Next button*/
    $("#next").click(function(){
        counter++
        if (counter == 15) {
            counter = 0;
        };
    })
    /*Prev Button*/
    $("#prev").click(function(){
        counter--
        if (counter == -1) {
            counter = 0;
        };
    })
    /*Display image 1,hide all other images*/
    if (counter == 0) {
        $(".image-holder").hide();
        $("#image1").show();
    };
    /*Display image 2,hide all other images*/
    if (counter == 1) {
        $(".image-holder").hide();
        $("#image2").show();
    };
    /*Display image 3,hide all other images*/
    if (counter == 2) {
        $(".image-holder").hide();
        $("#image3").show();
    };
</script>

事情是，如果计数器从1开始，它隐藏了第二个div，我想我的计数器没有动态工作，有人可以帮助我吗？

由于

Answer 1

您需要在button元素的点击事件处理程序中显示/隐藏图像。

counter = 0;
/*Next button*/
$("#next").click(function(){
    counter++
    if (counter == 15) {
        counter = 0;
    };

    $(".image-holder").hide().filter("#image" + (counter + 1)).show();
})

/*Prev Button*/
$("#prev").click(function(){
    counter--
    if (counter == -1) {
        counter = 0;
    };

    $(".image-holder").hide().filter("#image" + (counter + 1)).show();
})

Answer 2

显示/隐藏部分仅在首次加载页面时运行。你的脚本应该是这样的：

<script>
counter = 0;
/*Next button*/
$("#next").click(function(){
    counter++
    if (counter == 15) {
        counter = 0;
    };
    refreshImages();
})
/*Prev Button*/
$("#prev").click(function(){
    counter--
    if (counter == -1) {
        counter = 0;
    };
    refreshImages();
})

function refreshImages() {
/*Display image 1,hide all other images*/
if (counter == 0) {
    $(".image-holder").hide();
    $("#image1").show();
};
/*Display image 2,hide all other images*/
if (counter == 1) {
    $(".image-holder").hide();
    $("#image2").show();
};
/*Display image 3,hide all other images*/
if (counter == 2) {
    $(".image-holder").hide();
    $("#image3").show();
}; 
}
</script>

Jquery在计数器更改时显示和隐藏div，但它没有

2 个答案: