将主页中的图像与图库页面的轮播链接

问题描述 投票：0回答：1

我是一名初学者，正在寻求帮助。 我尝试构建一个特定的轮播。

我的index.html页面仅显示图库的前三张图像。

我希望当我们单击index.html页面中的一个特定图像时，该图像会显示在gallery.html页面中，并且我们可以使用键盘的右/左箭头通过轮播查看其他图像。

轮播似乎工作正常......但有一个主要问题：无论我们在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);
}

如何确保在 gallery.html 中始终获得正确的图像？

javascript html carousel
1个回答
1
投票

您应该将 html 页面视为完全独立的程序。每次您单击链接或重新加载页面时，都会发生以下情况：

  • 当前页面已被删除
  • 当前页面中的所有 javascript 代码停止运行
  • 您的代码创建的所有变量，停止存在

然后

  • 新的 html 页面已下载并呈现
  • 新 html 页面中的所有 javascript 文件都会从头开始执行。
  • 代码不知道上一页中的内容，甚至不知道其他浏览器选项卡中的内容。

您的问题来自于您有两个独立的 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 代码中，您可以添加一些页面加载后立即执行的代码：

  • 检查 url，并检索哈希值，即 url 中 # 符号之后的部分。
  • 根据该哈希值设置当前索引
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) {
        currentIndex = Number(hash);
        showImage(currentIndex);
      }
    });

    // the rest of your code ...

请注意，仅在 gallery.html 页面中需要此脚本

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.