图片轮播中用<a>标签包裹图片导致显示异常的求助

给轮播图片添加跳转链接后显示异常，核心原因是原CSS的3D变换样式直接作用在<img>标签上，用<a>包裹<img>后，<a>成为了#spinner的直接子元素，原CSS选择器无法匹配新结构，导致样式失效。按以下步骤修改即可解决：

1. 更新HTML结构 #

给每个<img>外层包裹<a>标签并设置跳转链接：

<div id="carousel">
    <figure id="spinner">
        <a href="你的跳转链接1"><img src="./Resources/Images/weeks/week1.png" alt></a>
        <a href="你的跳转链接2"><img src="./Resources/Images/weeks/week2.png" alt></a>
        <a href="你的跳转链接3"><img src="./Resources/Images/weeks/week3.png" alt></a>
        <a href="你的跳转链接4"><img src="./Resources/Images/weeks/week4.png" alt></a>
        <a href="你的跳转链接5"><img src="./Resources/Images/weeks/week5.png" alt></a>
        <a href="你的跳转链接6"><img src="./Resources/Images/weeks/week6.png" alt></a>
        <a href="你的跳转链接7"><img src="./Resources/Images/weeks/week7.png" alt></a>
        <a href="你的跳转链接8"><img src="./Resources/Images/weeks/week8.png" alt></a>
    </figure>
</div>
<span style="float:left" class="ss-icon" onclick="galleryspin('')">&lt;</span>
<span style="float:right" class="ss-icon" onclick="galleryspin('-')">&gt;</span>

2. 调整CSS样式 #

把原CSS中所有针对figure#spinner img的选择器替换为figure#spinner a，同时给<a>内部的<img>设置宽度100%，确保图片填满链接容器：

div#carousel {
    perspective: 1200px;
    background: transparent;
    padding-top: 5%;
    font-size: 0;
    margin-bottom: 3rem;
    overflow: hidden;
}

figure#spinner {
    transform-style: preserve-3d;
    height: 400px;
    transform-origin: 50% 50% -500px;
    transition: 1s;
    object-fit: contain;
}

/* 将原img的定位、变换样式转移到a标签 */
figure#spinner a {
    width: 40%;
    max-width: 425px;
    position: absolute;
    left: 30%;
    transform-origin: 50% 50% -500px;
    outline: 1px solid transparent;
}

/* 让img填满a标签，保证点击区域完整 */
figure#spinner a img {
    width: 100%;
    display: block;
}

/* 给每个a元素设置对应3D旋转角度 */
figure#spinner a:nth-child(1) {
    transform: rotateY(0deg);
}

figure#spinner a:nth-child(2) {
    transform: rotateY(45deg);
}

figure#spinner a:nth-child(3) {
    transform: rotateY(90deg);
}

figure#spinner a:nth-child(4) {
    transform: rotateY(135deg);
}

figure#spinner a:nth-child(5) {
    transform: rotateY(180deg);
}

figure#spinner a:nth-child(6) {
    transform: rotateY(225deg);
}

figure#spinner a:nth-child(7) {
    transform: rotateY(270deg);
}

figure#spinner a:nth-child(8) {
    transform: rotateY(315deg);
}

div#carousel~span {
    color: #fff;
    margin: 5%;
    display: inline-block;
    text-decoration: none;
    font-size: 2rem;
    transition: 0.6s color;
    position: relative;
    margin-top: -6rem;
    border-bottom: none;
    line-height: 0;
}

3. JS代码无需修改 #

原JS仅控制#spinner的旋转角度，与内部元素结构无关，保持原有代码即可：

var angle = 0;

function galleryspin(sign) {
    spinner = document.querySelector("#spinner");
    if (!sign) {
        angle = angle + 45;
    } else {
        angle = angle - 45;
    }
    spinner.setAttribute("style", "-webkit-transform: rotateY(" + angle + "deg); -moz-transform: rotateY(" + angle + "deg); transform: rotateY(" + angle + "deg);");
}

原理说明 #

原轮播的3D定位、变换逻辑基于#spinner的直接子元素（原<img>）实现，换成<a>包裹后，<a>成为了#spinner的直接子元素，因此需要把原<img>的定位、变换样式完全转移到<a>上，同时让<img>填满<a>空间，既保留3D轮播效果，又实现图片跳转功能。

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