#javascript
#javascript
Вопрос:
Я пытаюсь создать галерею в стиле журнала, которая может извлекать несколько файлов JPG (18) и отображать их в 2-х разделах. Затем левая и правая кнопки будут использоваться для загрузки следующих 2 страниц. Первой страницей будет обложка, которая будет закрыта. Затем страницы будут располагаться рядом, как разворот.
Я создал следующее, которое работает наполовину, оно загружается в список файлов JPG, а следующая кнопка помещает изображение в div, а затем повторяет. Основная проблема заключается в том, что при нажатии кнопки next для изменения страницы она повторяется по 1 за раз вместо перехода на следующие 2 страницы.
Я попытался изменить 1
на 2
в for
цикле, но он отлично загружает первые 2 разворота страницы, а затем остальные повторяет только по 1 странице за раз.
Кто-нибудь может дать мне несколько советов о том, как это можно улучшить и изменять по 2 страницы за раз?
Вот codePen, чтобы сделать это немного понятнее:
https://codepen.io/nolimit966/pen/JVoPJq
Спасибо
var pages = [
{"name":"img1", "src":"images/1.jpg"},
{"name":"img2", "src":"images/2.jpg"},
{"name":"img3", "src":"images/3.jpg"},
{"name":"img4", "src":"images/4.jpg"},
{"name":"img5", "src":"images/5.jpg"},
{"name":"img6", "src":"img/prod-6.png"},
{"name":"img7", "src":"img/prod-7.png"},
{"name":"img8", "src":"img/prod-8.png"},
{"name":"img9", "src":"img/prod-9.png"},
];
imgIndex = 0;
document.getElementById("image2").src = pages[0].src;
document.getElementById("nextBtn").addEventListener("click", function(){
var page2 = document.getElementById("image1")
if(pages.length > imgIndex 1){
imgIndex ;
// page1.classList.toggle('is-active');
document.getElementById("image1").style.display = "block";
document.getElementById("image1").src = pages[imgIndex].src;
document.getElementById("image2").src = pages[imgIndex 1].src;
} else {
console.log("its zero");
imgIndex = 0;
}
});
<button id="prevBtn">Previous</button>
<button id="nextBtn">Next</button>
<div id="container">
<div id="page1">
<img src="" id="image1" alt="" style="display:none;"/>
</div>
<div id="page2">
<img src="" id="image2" alt=""/>
</div>
</div>
Комментарии:
1. Почему это
2
может вызвать проблемы? Какие проблемы? Кроме того, зачем создавать еще одну галерею изображений / карусель, когда есть бесчисленное множество бесплатных? Для обучения?
Ответ №1:
Вы должны добавлять два к номеру индекса каждый раз, когда номер индекса не равен нулю (не на титульной странице)
Когда текущая страница находится на титульной странице (imgIndex= 0)
imgIndex 0 -> 1: отображать imgIndex 1 и 2
Когда текущая страница не находится на титульной странице (imgIndex>0)
imgIndex 1 -> 3: отображение imgIndex 3 и 4
imgIndex 3 -> 5: отображение imgIndex 5 и 6
Поэтому вместо
imgIndex ;
Попробуйте это
if(imgIndex == 0){
imgIndex ;
}else {
imgIndex = 2;
}
Комментарии:
1. большое спасибо за вашу помощь — это действительно ценится