HTML轮播图链接异常：移动端/桌面端均跳转至第三个链接

问题根源 #

所有轮播项的<a>标签未随轮播图同步控制显示/隐藏，加上.slide类仅作用于<img>标签，导致所有<a>标签重叠在同一位置——最后一个<a>标签始终处于最上层，无论显示哪张轮播图，点击触发的都是最后一个链接。

修复方案 #

调整HTML结构，将.slide类移到<a>标签上，让链接与轮播图的显示状态绑定；同步修改CSS和JS逻辑，确保样式和切换行为正常。

修改后的完整代码

HTML

<div class="slideshow">
  <a href="https://example.com/1" class="slide active desktop-slide">
    <img src="https://picture.com/1" alt="Slide 1">
  </a>
  <a href="https://example.com/2" class="slide desktop-slide">
    <img src="https://picture.com/2" alt="Slide 2">
  </a>
  <a href="https://example.com/3" class="slide desktop-slide">
    <img src="https://picture.com/3" alt="Slide 3">
  </a>
  <a href="https://example.com/mobile1" class="slide active mobile-slide">
    <img src="https://picture.com/1" alt="Mobile Slide 1">
  </a>
  <a href="https://example.com/mobile2" class="slide mobile-slide">
    <img src="https://picture.com/mobile2" alt="Mobile Slide 2">
  </a>
  <a href="https://example.com/mobile3" class="slide mobile-slide">
    <img src="https://picture.com/mobile3" alt="Mobile Slide 3">
  </a>
</div>

CSS

/* 轮播基础样式 */
.slideshow {
  width: 100%;
  height: 600px;
  position: relative;
  overflow: hidden;
}

.slideshow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
  max-width: 100%;
  max-height: 100%;
}

.slideshow .slide {
  display: block;
  width: 100%;
  height: 600px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow .slide.active {
  opacity: 1;
}

/* 设备适配样式 */
@media (max-width: 480px) {
  .desktop-slide {
    display: none !important;
  }
  .mobile-slide {
    display: block !important;
  }
}

@media (min-width: 481px) {
  .mobile-slide {
    display: none !important;
  }
}

JavaScript

// 轮播逻辑
var desktopSlides = document.querySelectorAll('.desktop-slide');
var mobileSlides = document.querySelectorAll('.mobile-slide');
var currentDesktopSlide = 0;
var currentMobileSlide = 0;
var slideInterval = setInterval(nextSlide, 4500);
var interactionTimeout;
var isMobile = window.innerWidth <= 480;

function nextSlide() {
  resetInteractionTimeout();
  if (isMobile) {
    mobileSlides[currentMobileSlide].className = 'slide mobile-slide';
    currentMobileSlide = (currentMobileSlide + 1) % mobileSlides.length;
    mobileSlides[currentMobileSlide].className = 'slide active mobile-slide';
  } else {
    desktopSlides[currentDesktopSlide].className = 'slide desktop-slide';
    currentDesktopSlide = (currentDesktopSlide + 1) % desktopSlides.length;
    desktopSlides[currentDesktopSlide].className = 'slide active desktop-slide';
  }
}

function previousSlide() {
  resetInteractionTimeout();
  if (isMobile) {
    mobileSlides[currentMobileSlide].className = 'slide mobile-slide';
    currentMobileSlide = (currentMobileSlide - 1 + mobileSlides.length) % mobileSlides.length;
    mobileSlides[currentMobileSlide].className = 'slide active mobile-slide';
  } else {
    desktopSlides[currentDesktopSlide].className = 'slide desktop-slide';
    currentDesktopSlide = (currentDesktopSlide - 1 + desktopSlides.length) % desktopSlides.length;
    desktopSlides[currentDesktopSlide].className = 'slide active desktop-slide';
  }
}

function resetInteractionTimeout() {
  clearTimeout(interactionTimeout);
  clearInterval(slideInterval);
  slideInterval = setInterval(nextSlide, 4500);
  interactionTimeout = setTimeout(startInteraction, 10000);
}

function startInteraction() {
  clearTimeout(interactionTimeout);
  clearInterval(slideInterval);
  slideInterval = setInterval(nextSlide, 4500);
}

window.addEventListener('resize', function() {
  isMobile = window.innerWidth <= 480;
  startInteraction();
});

document.getElementById('nextBtn').addEventListener('click', nextSlide);
document.getElementById('prevBtn').addEventListener('click', previousSlide);

关键说明 #

1. 把.slide类移到<a>标签后，轮播的显示/隐藏状态直接绑定到链接上，避免点击穿透问题。
2. CSS中给.slide添加display: block，确保链接作为块级元素占满容器。
3. JS修改className时保留desktop-slide/mobile-slide类，保证媒体查询的设备适配规则正常生效。

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