Простая галерея следующая предыдущая кнопка фоновые изображения

Я пытаюсь создать очень простую галерею с фоновыми изображениями на теге body и кнопками "предыдущий / следующий". Для этого я создал массив, содержащий изображения и вызывающий фактический индекс. К сожалению, я не могу вызвать первое изображение bg_01.Jpg для начала, а мои кнопки назад / вперед останавливаются на третьем изображении? Я также создал скрипку здесь: любая помощь будет оценена.

var Images = ['bg_01, bg_02', 'bg_03', 'bg_04', 'bg_05', 'bg_06', 'bg_07', 'bg_08', 'bg_09', 'bg_10', 'bg_11', 'bg_12'];
var ImgLength = Images.length;
$("body").css("background-image", "url(../img/" + Images[0] + ".jpg)");
$('#panel .left').click(function () {
    if (ImgLength > 0) {
        ImgLength = ImgLength - 1;
    } else {
        ImgLength = 0;
    }
    $("body").css("background-image", "url(../img/" + Images[ImgLength] + ".jpg)");
    return false;
});

$('#panel .right').click(function () {
    if (ImgLength < Images.length - 1) {
        ImgLength = ImgLength + 1;
    } else {
        ImgLength = 0;
    }
    $("body").css("background-image", "url(../img/" + Images[ImgLength] + ".jpg)");
    return false;
});

Источник

1 ответ

Решение

В вашем массиве есть ошибка:

['bg_01, bg_02',...

ты пропустил, чтобы закрыть 'bg_01' и открыть 'bg_02' строки

поэтому первый элемент вашего массива 'bg_01, bg_02'

Источник
Другие вопросы по тегам