Question

我已经在javascript中编写了一个图像滑块，它是“功能性的”，但除了第一张和最后一张图像外，它不会交替显示图像。例如，如果我在第一张图像上并按下右按钮，它将不会更改为阵列中的下一张图像。但是，如果我按下左按钮，它将更改为数组中的最后一个图像。最后一张图片也会发生同样的事情。我不知道如何解决这个问题。你能帮忙吗？

我认为它可能需要对“总”变量做一些事情，但我不确定。

这是代码......

window.onload = function () {
            var nmbr_imgs = 4;
            var imgs_holder = ["IMGS/Actinium.png", "IMGS/Aluminum.png", "IMGS/Astatine.png",  "IMGS/Barium.png"];
            var total = imgs_holder.length;
            var left_btn = document.getElementById('left_btn');
            var right_btn = document.getElementById('right_btn');
            var imgs_display = document.getElementById('imgs_display');

            left_btn.addEventListener('click', function() {
                var lefting = total - 1;
                imgs_display.src = imgs_holder[lefting];
                if (lefting < 0) {
                    imgs_display.src = imgs_holder[(nmbr_imgs - 1)];
                }
            }, false);

            right_btn.addEventListener('click', function() {
                var righting = total + 1;
                imgs_display.src = imgs_holder[righting];
                if (righting > (nmbr_imgs - 1)) {
                    imgs_display.src = imgs_holder[0];
                }
            }, false);
        }

Answer 1

你的听众有点......

total = total - 1;
imgs_display.src = imgs_holder[total];
if(lefting < 0) {
  total = nmbr_imgs - 1;
  imgs_display = imgs_holder[total]
}

...尝试递增/递减总数，而不是每次重置为+/- 1的lefting / righting。

图片幻灯片不会滑动

1 个答案: