首页图片跳转画廊Carousel时定位对应图片的问题求助

我是编程新手，正在开发轮播组件：

• index.html仅展示图库前三张图片，点击某张图片时，希望gallery.html直接显示该图片，且支持键盘左右箭头切换其他图片
• 当前轮播切换功能正常，但核心问题：无论点击index.html中哪张图片，gallery.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>

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);
}

解决方案 #

问题根源：index.html和gallery.html是两个独立页面，JS变量无法跨页面共享。原代码中updateIndex在index页面修改的currentIndex，会在跳转到gallery页面后被重置为初始值0，导致始终显示第一张图。

需要通过URL参数传递图片索引，并在gallery页面加载时读取该参数设置初始显示位置：

1. 修改index.html的跳转链接，添加URL参数 #

把每个<a>标签的href改为带index参数的形式，同时移除无用的onclick事件：

<div id="extrait">
    <a href="gallery.html?index=1"><img src="assets/image1.jpg" alt="Image 1"></a>
    <a href="gallery.html?index=2"><img src="assets/image2.jpg" alt="Image 2"></a>
    <a href="gallery.html?index=3"><img src="assets/image3.jpg" alt="Image 3"></a>
</div>
<script src="script.js"></script>
</body>

2. 修改script.js，在gallery页面加载时读取URL参数 #

更新初始化逻辑，读取URL中的index参数，转换为图片列表的0-based索引（因为原代码中图片数组索引从0开始，而传递的index是1开始的）：

const galleryImages = document.querySelectorAll('#carousel img');
let currentIndex = 0;

// 页面加载时读取URL参数，设置初始索引
const urlParams = new URLSearchParams(window.location.search);
const initialIndex = urlParams.get('index');
if (initialIndex !== null) {
    // 转换为0-based索引，同时确保索引在有效范围内
    currentIndex = parseInt(initialIndex) - 1;
    if (currentIndex < 0 || currentIndex >= galleryImages.length) {
        currentIndex = 0;
    }
}

function showImage(index) {
    galleryImages.forEach((image, i) => {
        image.style.display = i === index ? 'block' : '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);
// }

内容的提问来源于stack exchange，提问作者Didier2791