带有链接图像内容的HTML CSS放置点动画幻灯片

Question

如何在幻灯片中填写“点”？

我的幻灯片由4个元素组成，单击一个元素将重定向到另一个页面（以Google为例）。

为了使它起作用，我找到了以下解决方案：为链接的幻灯片动画制作动画。每个链接都有文字和图像。 （有效）

但是幻灯片是自动的，我希望每次显示一个元素（当出现带有图像和文本的链接时，相应的点都用黑色填充。

我尝试以其他方式进行操作，但是链接存在很多问题。

我不知道自己的解释是否很好，但是我附上了代码，CSS动画和“点”的样式。

PD。命名我的幻灯片滑块。

div.dots {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-self: end;
}

div.dots div {
  width: 10px;
  height: 10px;
  border: 1px solid black;
  border-radius: 50%;
}

div.dots div:hover {
  background-color: black;
}

a.slide {
  position: absolute;
  -webkit-animation: round 40s infinite;
  opacity: 0;
}

@-webkit-keyframes round {
  25% {
    opacity: 1;
    z-index: 990;
  }
  40% {
    opacity: 0;
    z-index: 1;
  }
}

.slider a:nth-child(4) {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -ms-animation-delay: 30s;
  -o-animation-delay: 30s;
  animation-delay: 30s;
}

.slider a:nth-child(3) {
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  -ms-animation-delay: 20s;
  -o-animation-delay: 20s;
  animation-delay: 20s;
}

.slider a:nth-child(2) {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -ms-animation-delay: 10s;
  -o-animation-delay: 10s;
  animation-delay: 10s;
}

.slider a:nth-child(1) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

<div class="slider">
  <a class="slide" href="https://google.com.mx" target="_blank">
    <div class="text">
      <p>Some text 1</p>
    </div>
    <img src="<?=base_url()?>assets/img/2.jpg">
  </a>

  <a class="slide" href="https://google.com.mx" target="_blank">
    <div class="text">
      <p>Some text 2</p>
    </div>
    <img src="<?=base_url()?>assets/img/3.jpg">
  </a>

  <a class="slide" href="https://google.com.mx" target="_blank">
    <div class="text">
      <p>Some text 3</p>
    </div>
    <img src="<?=base_url()?>assets/img/2.jpg">
  </a>

  <a class="slide" href="https://google.com.mx" target="_blank">
    <div class="text">
      <p>Some text 4</p>
    </div>
    <img src="<?=base_url()?>assets/img/1.jpg">
  </a>
</div>

<div class="dots">
  <div focus=""></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

由于似乎要避免使用任何JavaScript，因此最明智的方法似乎是为那些与滑块动画的时间匹配的“点” div添加CSS。例如：

@-webkit-keyframes highlight-dot {
  0% {
    background-color: black;
  }

  /* Increasing/decreasing this percent can help you get interesting fade effects. */
  10% {
    background-color: white;
  }

  100% {
    background-color: white; /* Return to default */
  }
}

div.dots div {
  background-color: white;
  -webkit-animation: highlight-dot 40s infinite;
}

/* Now set the animation delays to match your slider links */
div.dots div:nth-of-type(4) {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -ms-animation-delay: 30s;
  -o-animation-delay: 30s;
  animation-delay: 30s;
}

/* ... etc. */

您还可以考虑将0％设置为默认值（例如，白色），并为开始的淡入淡出动画将“ 5％”的低数字设置为“活动”颜色（例如，黑色）。]

最后一个注释：您具有一些浏览器前缀，但是要获得更多的跨平台功能，您需要添加更多功能（例如，您具有@ -webkit-keyframes以支持较旧的Chrome版本，但对于现代浏览器则没有默认的@keyframes ）。