Html 不带引导和任何功能的转盘指示器

我见过很多为图片库制作旋转木马指示器的例子。但他们都在使用引导或单选按钮（用于跳转到另一张图片）。我不想那样

根据下面的代码，是否有方法向用户显示他/她当前正在查看的3张图片中的哪一张？我不希望用户能够点击指示器跳转到另一张图片。我只想突出显示指示器，让他/她知道“好吧，我在第二张图片上”

我只想在手机和平板电脑上使用这个东西，然后通过媒体查询，我会在桌面上更改它

注意：我是一个初学者，我只知道如何使用HTML和CSS…我确信使用JS有很多方法可以做到这一点…但我不理解它们

下面是示例，您可以看到它的行为重要信息：使用mobile simulator检查其行为，因为此处的代码片段无法正常工作

.sezionecane{
边缘顶部：1.5em；
}
诺梅坎先生{
文本对齐：居中；
边缘底部：.5em；
}
圣母玛利亚酒店{
显示器：flex；
溢出-x：自动；
-webkit溢出滚动：触摸；
滚动捕捉类型：x必填；
滚动行为：平滑；
边缘底部：1米；
}
.immaginicane:：-webkit滚动条{
显示：无；
}
.immaginicane>img{
滚动捕捉对齐：开始；
}

奥索
洛雷姆·伊普苏姆·多洛·希特·阿梅特（Lorem ipsum Door sit amet）是一位杰出人物。阿尼米·苏尔塔，多洛尔！在ducimus的rerum quia，dolores numquam进行了一次流动性假设练习！这是一种很好的治疗方法。开胃酒，开胃酒和开胃酒

未解决（当前）。您可以单击#foto1，它将更改#foto2（或#foto3）的颜色，但不会更改上一个元素，也不会更改其父元素之外的内容（如点）。除此之外，它在手机上看起来也不错

可能需要将~.dots#dot-s放置在.immaginicane的内部，但这似乎不起作用

<style>
.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;
z-index: 10;
}

.immaginicane::-webkit-scrollbar{
display: none;
}

.immaginicane > img{
scroll-snap-align: start;
}

#foto1, #foto2, #foto3{
height: 55vh;width: 100vw;
display: block;position: relative;
}

#foto1::before{
content: "";
height: 0px;width: 0px;
top: 46%;right: 10px;
display: block;position: absolute;
opacity: 0.7;
border: 10px solid transparent;
border-left: 10px solid #72DAFF;
}

#foto1::after{
content: "foto 1";
color: #72DAFF;
top: 6px;left: 12px;
display: block;position: absolute;
opacity: 0.7;
}

#dots{
width: 100%;height: 12px;
display: flex;position: relative;flex-direction: row;
align-items: center;justify-content: center;
z-index: 11;
}

.dot{
background-color: #EEE;
width: 10px;height: 10px;
margin-right: 5px;margin-left: 5px;
display: block;position: relative;
border-radius: 50%;
}

#foto1:hover~#foto2{
background-color: #72DAFF;
}
#foto2:hover~#dot-2{
background-color: #72DAFF;
}
#foto3:hover~#foto-2{
background-color: #72DAFF;
}
</style>
<div class="sezionecane">
<h3 class="nomecane">Osso</h3>

 <div class="immaginicane">
<img id="foto1" src="" width="100%" alt="foto1">
<img id="foto2" src="" width="100%" alt="foto2">
<img id="foto3" src="" width="100%" alt="foto3">
 </div>

<div id="dots"><div class="dot" id="dot-1"></div><div class="dot" id="dot-2"></div><div class="dot" id="dot-3"></div></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>

sezionecane先生{
边缘顶部：1.5em；
}
诺梅坎先生{
文本对齐：居中；
边缘底部：.5em；
}
圣母玛利亚酒店{
显示器：flex；
溢出-x：自动；
-webkit溢出滚动：触摸；
滚动捕捉类型：x必填；
滚动行为：平滑；
边缘底部：1米；
z指数：10；
}
.immaginicane:：-webkit滚动条{
显示：无；
}
.immaginicane>img{
滚动捕捉对齐：开始；
}
#foto1，foto2，foto3{
高度：55vh；宽度：100vw；
显示：块；位置：相对；
}
#foto1：：之前{
内容：“；
高度：0px；宽度：0px；
顶部：46%；右侧：10px；
显示：块；位置：绝对；
不透明度：0.7；
边框：10px实心透明；
左边框：10px实心#72DAFF；
}
#foto1：：之后{
内容：“foto 1”；
颜色：#72DAFF；
顶部：6px；左侧：12px；
显示：块；位置：绝对；
不透明度：0.7；
}
#圆点{
宽度：100%；高度：12px；
显示：柔性；位置：相对；柔性方向：行；
对齐项目：居中；对齐内容：居中；
z指数：11；
}
多特先生{
背景色：#EEE；
宽度：10px；高度：10px；
右边距：5px；左边距：5px；
显示：块；位置：相对；
边界半径：50%；
}
#foto1：悬停#foto2{
背景色：#72DAFF；
}
#foto2：悬停~#点-2{
背景色：#72DAFF；
}
#foto3:悬停#FOTO2{
背景色：#72DAFF；
}
奥索
洛雷姆·伊普苏姆·多洛·希特·阿梅特（Lorem ipsum Door sit amet）是一位杰出人物。阿尼米·苏尔塔，多洛尔！在ducimus的rerum quia，dolores numquam进行了一次流动性假设练习！这是一种很好的治疗方法。开胃酒，开胃酒和开胃酒

您能定义什么是指示器吗？#foto1:：在{content:；高度：0px；宽度：0px；顶部：46%；右侧：10px；显示：块；位置：绝对；不透明度：0.7；边框：10px实心透明；边框左侧：10px实心#72DAFF；}#foto1:：在{content:“foto1”之后；颜色：#72DAFF；顶部：6px；左侧：12px；显示：块；位置：绝对；不透明度：0.7；}我的意思是，例如，你有5张图片，下面有5个点。当显示第三张图片时，第三个点会高亮显示。您是否已将其带给Lambda Theta Phi people？