纯CSS/HTML图片切换器加载跳转问题求助

Hey there! 你遇到的跳转问题根源在于浏览器对锚点链接的默认行为——当点击#pic2这类锚点时，浏览器会自动滚动到对应ID的元素位置。因为你的图片容器是垂直堆叠的，所以就出现了这种烦人的跳转效果。咱们用纯CSS就能搞定，完全不需要JavaScript，适配你的工单系统环境。

核心修改思路 #

1. 把所有图片容器绝对定位在同一个区域，让它们互相重叠，而不是垂直排列
2. 默认隐藏所有图片容器，只显示初始的第一张（或者通过:target伪类控制显示当前选中的）
3. 利用CSS的:target伪类来切换显示状态，点击锚点时只展示目标图片容器
4. 调整按钮的定位方式，避免浮动影响整体布局

修改后的完整代码 #

<style>
#slidepicswrap {
  width: 640px;
  height: 450px;
  margin: 0 auto;
  position: relative;
  font-family: verdana, arial, sans-serif;
}

#slidepicswrap #slides {
  position: absolute;
  left: 0;
  top: 0;
  height: 450px;
  width: 640px;
  overflow: hidden;
  text-align: center;
}

/* 关键修改：所有图片容器绝对定位，叠在同一位置 */
#slides div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 10px;
  display: none; /* 默认隐藏 */
}

/* 显示初始的第一张图片 */
#slides #pic1 {
  display: block;
}

/* 当锚点触发时，显示对应的图片容器 */
#slides div:target {
  display: block;
}

#slides div img {
  clear: both;
  display: block;
  margin: 0 auto;
  border: 0;
  max-width: 100%;
  height: auto;
}

#slides div h3 {
  padding: 10px 0 0 0;
  margin: 0;
  font-size: 18px;
}

#slides div p {
  padding: 5px 0;
  margin: 0;
  font-size: 12px;
  line-height: 18px;
}

a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
  position: relative;
  z-index: 10; /* 确保按钮在图片上方 */
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
  margin-right: 10px;
}

.next {
  background-color: #4CAF50;
  color: white;
}

.round {
  border-radius: 50%;
}
</style>

<div id="slidepicswrap">
  <div id="slides">
    <div id="pic1">
      <img src="https://unsplash.it/g/500/350?random" alt="Image 1" />
      <a class="previous" href="#pic3" rel="nofollow">&lt;&lt;</a>
      <a class="next" href="#pic2" rel="nofollow">&gt;&gt;</a>
      <h3>Image 1</h3>
      <p>Text of image 1.</p>
    </div>
    <div id="pic2">
      <img src="https://unsplash.it/g/500/350" alt="Image 2" />
      <a class="previous" href="#pic1" rel="nofollow">&lt;&lt;</a>
      <a class="next" href="#pic3" rel="nofollow">&gt;&gt;</a>
      <h3>Image 2</h3>
      <p>Text of image 2.</p>
    </div>
    <div id="pic3">
      <img src="https://unsplash.it/g/500/350?random" alt="Image 3" />
      <a class="previous" href="#pic2" rel="nofollow">&lt;&lt;</a>
      <a class="next" href="#pic1" rel="nofollow">&gt;&gt;</a>
      <h3>Image 3</h3>
      <p>Text of image 3.</p>
    </div>
  </div>
</div>

关键修改点说明 #

• 绝对定位图片容器：让所有#slides div都定位在父容器的左上角，互相重叠，这样浏览器就不会因为锚点滚动页面了
• :target伪类控制显示：当点击锚点链接时，对应的容器会被:target选中，设置为display: block，其他容器保持隐藏
• 按钮层级提升：给按钮设置z-index:10，确保它们始终在图片上方，不会被图片遮挡
• 移除浮动布局：原来的float:left/right容易导致布局混乱，改为用margin调整按钮间距，更稳定

这样修改后，点击上一张/下一张按钮时，图片会平滑切换，不会再有页面跳转的问题，而且完全符合你的纯HTML/CSS需求~

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