Здравствуйте, у меня есть эта галерея с изображениями в массиве. У меня также есть кнопка, при нажатии которой она переходит к следующему изображению. Я попытался воссоздать кнопку, которая ведет к предыдущему изображению, но при нажатии ничего не происходит.
Проблема: кнопка «Предыдущий» не работает и не может вернуться к изображению 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;
}
}
}
if (i === imgArray.length)
невозможно
@MisterJojo Console.log дает мне текущее имя файла. если это на изображении 1, оно даст изображение 1 + сколько раз я нажимаю предыдущую кнопку
1- вы имеете в виду текущий путь к файлу? 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;
}
}
Кажется, работает, хотя он не будет циклически переключаться между двумя изображениями посередине. Нажатие «Далее» на изображении по умолчанию ничего не сделает, а нажатие кнопки «Назад» приведет меня к последнему изображению, но не дальше.
этот код должен быть в порядке .. (?)
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)
}
сделайте
console.info(document.getElementById(element).src)
, чтобы убедиться, что это значение относительное или абсолютное