我是一名初学者,正在寻求帮助。 我试图找出一个特定的轮播。 我的 index.html 页面自动仅显示图库的前三张图像。
我希望当我们单击index.html页面中的一个特定图像时,该图像会显示在gallery.html页面中,并且我们可以使用键盘的右/左箭头通过轮播查看eac图像。
轮播似乎工作正常......但有一个主要问题:无论我们在index.html页面上单击什么图像,它都是第一个出现在图库中的图像。
这是index.html代码:
<div id="extrait">
<a href="gallery.html"><img src="assets/image1.jpg" alt="Image 1" onclick="updateIndex(1)"></a>
<a href="gallery.html"><img src="assets/image2.jpg" alt="Image 2" onclick="updateIndex(2)"></a>
<a href="gallery.html"><img src="assets/image3.jpg" alt="Image 3" onclick="updateIndex(3)"></a>
</div>
<script src="script.js"></script>
</body>
然后,这是gallery.html代码;
<body>
<h1>Gallery</h1>
<div id="carousel">
<img src="assets/image1.jpg" alt="Image 1">
<img src="assets/image2.jpg" alt="Image 2">
<img src="assets/image3.jpg" alt="Image 3">
<img src="assets/image4.jpg" alt="Image 4">
<img src="assets/image5.jpg" alt="Image 5">
<img src="assets/image6.jpg" alt="Image 6">
<img src="assets/image7.jpg" alt="Image 7">
<img src="assets/image8.jpg" alt="Image 8">
<img src="assets/image9.jpg" alt="Image 9">
</div>
<script src="script.js"></script>
</body>
最后,这是javascript部分(script.js部分):
const galleryImages = document.querySelectorAll('#carousel img');
let currentIndex = 0;
function showImage(index) {
galleryImages.forEach((image, i) => {
if (i === index) {
image.style.display = 'block'; console.log("Index :", index);
} else {
image.style.display = 'none';
}
});
}
showImage(currentIndex);
//Gallery Carousel
document.addEventListener('keydown', function (event) {
if (event.key === 'ArrowLeft') {
currentIndex = (currentIndex - 1 + galleryImages.length) % galleryImages.length;
showImage(currentIndex);
} else if (event.key === 'ArrowRight') {
currentIndex = (currentIndex + 1) % galleryImages.length;
showImage(currentIndex);
}
});
// updateIndex
function updateIndex(index) {
currentIndex = index;
showImage(currentIndex);
}
有人可以帮助绝望的新手编码员吗?
提前致谢!
迪迪尔
您应该将 html 页面视为完全独立的程序。每次您单击链接或重新加载页面时,都会发生以下情况:
然后
您的问题来自于您有两个独立的 html 页面。即使您在两者中包含相同的 javascript 文件,但这并不意味着它们之间存在共享数据。第二页中的全局变量将不包含第一页中设置的值。
针对您的情况,正确的解决方案应该是传递有关您要在网址中打开的图像的数据:
在index.html中,将url修改为这样:
<div id="extrait">
<a href="gallery.html#1"><img src="assets/image1.jpg" alt="Image 1" onclick="updateIndex(1)"></a>
<a href="gallery.html#2"><img src="assets/image2.jpg" alt="Image 2" onclick="updateIndex(2)"></a>
<a href="gallery.html#3"><img src="assets/image3.jpg" alt="Image 3" onclick="updateIndex(3)"></a>
</div>
在 javascript 代码中,您可以添加一些页面加载后立即执行的代码:
const galleryImages = document.querySelectorAll('#carousel img');
let currentIndex = 0;
document.addEventListener("DOMContentLoaded", function() {
// Get the hash from the URL
var hash = window.location.hash.substr(1);
// Show the image corresponding to the hash
if (hash) {
showImage(Number(hash));
}
});
// the rest of your code ...