Создание предыдущей кнопки и сброс

Здравствуйте, у меня есть эта галерея с изображениями в массиве. У меня также есть кнопка, при нажатии которой она переходит к следующему изображению. Я попытался воссоздать кнопку, которая ведет к предыдущему изображению, но при нажатии ничего не происходит.

Проблема: кнопка «Предыдущий» не работает и не может вернуться к изображению 1 при нажатии кнопки «Далее» после перехода к окончательному изображению.

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = './images/andrea_highres.jpg';

imgArray[1] = new Image();
imgArray[1].src = './images/lizbeth_highres.jpg';

imgArray[2] = new Image();
imgArray[2].src = './images/lizzy_highres.jpg';

imgArray[3] = new Image();
imgArray[3].src = './images/nick_highres.jpg';

function nextImage(element) {
    var img = document.getElementById(element);

    for(var i = 0; i < imgArray.length; i++) {
        if (imgArray[i].src == img.src) {
            if (i === imgArray.length) {
                document.getElementById(element).src = imgArray[0].src;
                break;
            }
            document.getElementById(element).src = imgArray[i+1].src;
            break;
        }
    }
}

function prevImage(element) {
    var img = document.getElementById(element);

    for(var i = 0; i > imgArray.length; i++) {
        if (imgArray[i].src == img.src) {
            if (i === imgArray.length) {
                document.getElementById(element).src = imgArray[0].src;
                break;
            }
            document.getElementById(element).src = imgArray[i-1].src;
            break;
        }
    }
}

сделайте console.info(document.getElementById(element).src), чтобы убедиться, что это значение относительное или абсолютное

Mister Jojo 14.12.2020 02:40
if (i === imgArray.length) невозможно
Mister Jojo 14.12.2020 02:41

@MisterJojo Console.log дает мне текущее имя файла. если это на изображении 1, оно даст изображение 1 + сколько раз я нажимаю предыдущую кнопку

Strife_x7x 14.12.2020 02:48

1- вы имеете в виду текущий путь к файлу? 2-это относительное или абсолютное?

Mister Jojo 14.12.2020 02:53

Это выходит абсолютным

Strife_x7x 14.12.2020 03:00
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
54
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

попробуй с ним

const imgArray = ['andrea', 'lizbeth', 'lizzy', 'nick'].map(img=>
  {
  let img = new Image()
  img.src = `./images/${img}_highres.jpg`
  return img  
  })

function nextImage(element) {
    changePicture(element, 1)
}

function prevImage(element) {
    changePicture(element, -1)
}

function changePicture(element, count){
    var img = document.getElementById(element),
        index = imgArray.findIndex(el => el.src == img.src);
    if (index + count <= -1) { 
        img.src = imgArray[imgArray.length-1].src;
    }else if (index + count >= imgArray.length){ // You will never reach the length. The length value is last pos index + 1 (if we have 4 element, last index will be 3 but length woill be 4)
        img.src = imgArray[0].src;
    }else{
        img.src = imgArray[i + count].src;
    }
}

Кажется, работает, хотя он не будет циклически переключаться между двумя изображениями посередине. Нажатие «Далее» на изображении по умолчанию ничего не сделает, а нажатие кнопки «Назад» приведет меня к последнему изображению, но не дальше.

Strife_x7x 14.12.2020 02:50
Ответ принят как подходящий

этот код должен быть в порядке .. (?)

const imgRefs  = ['andrea', 'lizbeth', 'lizzy', 'nick']
  ,   imgArray = imgRefs.map( img =>  
        {
        let img = new Image()
        img.src = `./images/${img}_highres.jpg`
        return img  
        })
  ,   imageElement = document.getElementById('image_ID')  // make it as a const !
  ;
function changeImg( direction )
  {
  let newIndex = imgRefs.findIndex(x=>imageElement.src.includes(x) ) + direction

  if (newIndex < 0)               newIndex = 0
  if (newIndex >= imgRefs.length) newIndex = imgRefs.length -1

  imageElement.src = imgArray[newIndex].src
  }
function nextImage()
  {
  changeImg(+1)
  }
function prevImage()
  {
  changeImg(-1)
  }

Другие вопросы по теме