HTML CSS 放置带有 link 图片内容的圆点动画幻灯片

Question

如何在我的幻灯片中填写 "dots"？

我的幻灯片由 4 个元素组成，点击一个元素会重定向到另一个页面（例如 google）。

为了让它工作，我找到了这个解决方案：制作 link 的幻灯片动画。每个 link 都有文字和图片。（有效）

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

我尝试了不同的做法，但 link 遇到了很多问题。

我不知道我是否解释清楚了，但是我附上了代码，CSS动画和"dots"的样式。

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，看起来最明智的方法是为那些刚好匹配的 "dots" 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% 设置为默认值（例如，白色），将 "active" 颜色（例如，黑色）设置为 5% 之类的低数值，用于开始淡入淡出动画。

最后一点：你有一些浏览器前缀，但要获得更多的跨平台功能，你需要添加更多（例如你有@-webkit-keyframes 来支持旧的 Chrome 版本，但是现代浏览器没有默认的@keyframes。

HTML CSS 放置带有 link 图片内容的圆点动画幻灯片

HTML CSS Place dots Animated Slideshow with link image content

html

css

animation

image

slideshow