我正在一个投资组合网站上,在这里我可以在灯箱内以幻灯片形式显示图像。当我单击图像时,将打开一个灯箱,并显示包含该项目更多图像的幻灯片。我想在同一页面中创建多个幻灯片,而无需为每个幻灯片重新编写javascript孔,这可能吗?我使它工作了一个,但是我不知道如何在其余的幻灯片中复制它而不再次复制所有代码。 有人可以帮助我吗? 谢谢
一个图像链接和灯箱的HTML:
<!-- Portfolio item 01-->
<div class="projects" id="portfolio-01">
<a href="#" id="btnOpen"><img id="img-project" src="img/Arba_img_02.jpg"></a>
</div>
<!-- Portfolio Lightboxes-->
<!-- Lightbox 01-->
<div class="container" id="portfolio-item-01">
<div class="slide">
<img class="portfolio-img" src="img/Arba_img_01.jpg">
</div>
<div class="slide">
<img class="portfolio-img" src="img/Arba_img_02.jpg">
</div>
<div class="slide">
<img class="portfolio-img" src="img/Arba_img_03.jpg">
</div>
<!-- Next and previous buttons -->
<a class="prev" id="">Prev</a>
<a class="next" id="">Next</a>
<!-- Close -->
<a href="#portfolio" class="close">Back ↗</a>
</div>
JavaScript:
<script>
let sliderImages = document.querySelectorAll('.slide'),
arrowLeft = document.querySelector('.prev'),
arrowRight = document.querySelector('.next'),
current = 0,
openSlide = document.getElementById('btnOpen'),
container = document.querySelector('.container');
openSlide.addEventListener("click", function(){
container.style.display = 'flex';
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// Init slider
function startSlide() {
reset();
sliderImages[0].style.display = "flex";
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "flex";
current--;
}
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "flex";
current++;
}
// Left arrow click
arrowLeft.addEventListener("click", function(){
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function() {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
})
</script>