图片幻灯片不会滑动

Question

I have programmed an image slider in javascript, and it's "functional," but it doesn't alternate the images except for the very first and last images. For example, if I'm on the first image and press the right button, it won't change to the next image in the array. However, if I were to push the left button, it will change to last image in the array. The same thing will happen for the last image. I don't know how to fix this. Can you help?

I think it might have to do something with the "total" variable, but I'm not sure.

Here's the code...

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

Your listeners are off a bit ...

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

... try incrementing/decrementing total, not lefting/righting which are reset to total +/- 1 each time.