香草Js -如何显示特定图像的滑块基于点击项目在上一页

Question

//JS page one
let box = document.getElementsByClassName("box");
//click event
box[0].addEventListener("click", fn1);
box[1].addEventListener("click", fn2);
box[2].addEventListener("click", fn3);
box[3].addEventListener("click", fn4);
//show description at click and hide "click for info"
function fn1() {
window.location = 'carousel.html';
}
function fn2() {
window.location = 'carousel.html#2';
}
function fn3() {
window.location = 'carousel.html';
}
function fn4() {
window.location = 'carousel.html';
}

//JS page two
/*lightbox code*/ 
let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}

<!--HTML PAGE ONE-->
<div id="container">
<!--one-->
<div class="box">
<img title="paint one" class="image" src="images/paintings/1.jpg"> 
<p class="showText"></p>
</div>
<!--two-->
<div class="box">
<img title="paint two" class="image" src="images/paintings/2.jpg"> 
<p class="showText"></p>
</div>
<!--three-->
<div class="box">
<img title="paint one" class="image" src="images/paintings/3.jpg"> 
<p class="showText"></p>
</div>
<!--four-->
<div class="box">
<img title="paint two" class="image" src="images/paintings/4.jpg"> 
<p class="showText"></p>
</div>
</div>

<!--HTML PAGE 2 - CAROUSEL-->
<div id="lightbox">
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img class="image" src="images/paintings/1.jpg">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img class="image" src="images/paintings/2.jpg">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img class="image" src="images/paintings/3.jpg">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img class="image" src="images/paintings/4.jpg">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
</div>

我想知道是否有可能根据在第1页Html中单击的内容在第2页Html中显示所需的图像。我知道一个解决方案是为我想在点击时显示的每张照片创建一个HTML页面:我应该只更改窗口。addEventListener的位置，然后在JS文件中设置与slideIndex对应的数字，但如果能找到一个不复制页面的解决方案，那就太好了。我希望我讲清楚了

Answer 1

我找到了一个很好的替代方法。基本上在Html第一页，我给每个图像分配了一个id，在js第一页，在fn1, fn2, fn3和fn4窗口。我添加了相对id的哈希值eg:(窗口。Location = 'carousel.html#1')。然后在js页面2我添加了以下代码:

window.addEventListener('load', (event) => {
if(location.hash === "#1") {
currentSlide(1)
}
if(location.hash === "#2") {
currentSlide(2)
}
if(location.hash === "#3") {
currentSlide(3)
}
if(location.hash === "#4") {
currentSlide(4)
}
})

为了避免在css文件中可能的缓慢加载，我在。image类 中添加了一个加载gif作为背景图像。