仅用HTML/CSS实现无交互的移动端轮播当前图片指示器

没问题！既然你只会HTML和CSS，不想用JS或者Bootstrap，咱们完全可以用纯CSS实现这个仅高亮当前图片的指示器，而且满足移动端/平板显示、桌面隐藏的要求。下面是一步步的实现方法：

第一步：修改HTML，添加指示器结构 #

首先，在图片容器<div class="immaginicane">下面，新增一个用来放指示器的容器，里面放三个小圆点（对应三张图片），同时给每张图片加上tabindex="0"——这一步是为了让图片滚动到视口时能获得焦点，方便CSS检测：

<div class="sezionecane">
  <h3 class="nomecane">Osso</h3>
  <div class="immaginicane">
    <img id="foto1" src="cani/foto1.jpg" width="100%" alt="foto1" tabindex="0">
    <img id="foto2" src="cani/foto2.jpg" width="100%" alt="foto2" tabindex="0">
    <img id="foto3" src="cani/foto3.jpg" width="100%" alt="foto3" tabindex="0">
  </div>
  <!-- 新增的指示器容器 -->
  <div class="indicatori">
    <span class="punto"></span>
    <span class="punto"></span>
    <span class="punto"></span>
  </div>
  <p class="testocane">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi soluta, dolore! Sed aliquid assumenda exercitationem dolores numquam, at rerum quia, ducimus impedit consequuntur! Rem illo debitis beatae quas modi similique nemo, minima atque natus laborum. Aperiam, rerum et nesciunt ullam?</p>
</div>

第二步：编写CSS样式，实现指示器和高亮逻辑 #

接下来更新你的CSS，添加指示器的基础样式、高亮规则，以及桌面端隐藏的媒体查询：

.sezionecane { margin-top: 1.5em; }
.nomecane { text-align: center; margin-bottom: .5em; }
.immaginicane { 
  display: flex; 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
  scroll-snap-type: x mandatory; 
  scroll-behavior: smooth; 
  margin-bottom: 1em; 
}
.immaginicane::-webkit-scrollbar { display: none; }
.immaginicane > img { 
  scroll-snap-align: start; 
  flex-shrink: 0; /* 关键：防止图片被压缩，确保每张占满容器宽度 */
  width: 100%; 
}

/* --- 指示器样式开始 --- */
.indicatori {
  display: flex;
  justify-content: center; /* 让小圆点居中 */
  gap: 0.5em; /* 小圆点之间的间距 */
  margin-bottom: 1em;
}
.punto {
  width: 10px;
  height: 10px;
  border-radius: 50%; /* 变成圆形 */
  background-color: #ccc; /* 默认灰色 */
  pointer-events: none; /* 禁止点击，完全符合你不需要跳转的要求 */
}

/* 高亮当前显示的图片对应的指示器 */
.immaginicane:has(#foto1:focus) ~ .indicatori .punto:nth-child(1),
.immaginicane:has(#foto2:focus) ~ .indicatori .punto:nth-child(2),
.immaginicane:has(#foto3:focus) ~ .indicatori .punto:nth-child(3) {
  background-color: #333; /* 高亮用深灰色，你可以改成自己喜欢的颜色 */
}

/* 媒体查询：桌面端隐藏指示器 */
@media (min-width: 768px) {
  .indicatori {
    display: none;
  }
}
/* --- 指示器样式结束 --- */

关键知识点解释（适合新手理解） #

1. tabindex="0"：给图片添加这个属性后，当你滚动到某张图片时，浏览器会自动让它获得焦点，这样CSS就能检测到它的状态。
2. :has()选择器：这是CSS的新特性，用来检测父容器里是否有满足条件的子元素——这里就是检测图片是否处于focus状态，然后高亮对应的指示器。现在移动端的主流浏览器（Chrome、Safari、Firefox）都支持它，放心用。
3. pointer-events: none：让指示器完全不响应点击，确保用户不能通过点击指示器跳转图片，完美符合你的需求。
4. flex-shrink: 0：防止flex布局把图片压缩变形，确保每张图片都占满容器的100%宽度，保证scroll-snap的对齐效果正常。

这样修改后，你在移动端/平板上滚动图片时，对应的指示器就会自动高亮，桌面端则会隐藏指示器，完全不需要JS！

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