每张幻灯片的背景图像都不会改变

Question

我正在为我的网站制作幻灯片，但是当我尝试在它们上面放一个 link 时（所有 6 个都必须有一个 link 这是站点），我只是一遍又一遍地重复相同的图像。当我删除和标签时，它就不会再发生了。

body {
  font-family: Helvetica, sans-serif;
  padding: 5%;
  text-align: center;
}

#slideshow {
  overflow: hidden;
  height: 510px;
  width: 728px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 4368px;
  -webkit-animation: slide 25s ease infinite;
}

.slide {
  float: left;
  height: 510px;
  width: 728px;
}

.slide:nth-child(1) {
  background-image: url(../site/fotos/muhammad\ ali.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.slide:nth-child(2) {
  background-image: url(../site/fotos/muhammad\ ali\ 2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.slide:nth-child(3) {
  background-image: url(../site/fotos/muhammad\ ali\ 3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.slide:nth-child(4) {
  background-image: url(../site/fotos/muhammad\ ali\ 4.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.slide:nth-child(5) {
  background-image: url(../site/fotos/muhammad\ ali\ 5.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.slide:nth-child(6) {
  background-image: url(../site/fotos/muhammad\ ali\ 6.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

@-webkit-keyframes slide {
  10% {
    margin-left: 0px;
  }
  20% {
    margin-left: -728px;
  }
  28% {
    margin-left: -728px;
  }
  36% {
    margin-left: -1456px;
  }
  44% {
    margin-left: -1456px;
  }
  52% {
    margin-left: -2184px;
  }
  60% {
    margin-left: -2184px;
  }
  68% {
    margin-left: -2912px;
  }
  76% {
    margin-left: -2912px;
  }
  84% {
    margin-left: -3640px;
  }
  100% {
    margin-left: -3640px;
  }
}

<div id="slideshow">
  <div class="slide-wrapper">
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
  </div>
</div>

所以即使我输入了不同的 links，它也会不断重复同一张照片。

Answer 1

发生这种情况是因为 .slide 始终是 a link 的第一个（也是唯一一个）child，因此您需要改为这样做：

a:nth-child(N) .slide  { background-image: url('linkimage'); }

片段

body {
  font-family: Helvetica, sans-serif;
  padding: 5%;
  text-align: center;
}

#slideshow {
  overflow: hidden;
  height: 510px;
  width: 728px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 4368px;
  -webkit-animation: slide 25s ease infinite;
}

.slide {
  float: left;
  height: 510px;
  width: 728px;
  background-repeat: no-repeat;
  background-size: cover;
}

a:first-child .slide {
  background-image: url(https://picsum.photos/510/718?random=1);
}

a:nth-child(2) .slide {
  background-image: url(https://picsum.photos/510/718?random=2);
}

a:nth-child(3) .slide {
  background-image: url(https://picsum.photos/510/718?random=3);
}

a:nth-child(4) .slide {
  background-image: url(https://picsum.photos/510/718?random=4);
}

a:nth-child(5) .slide {
  background-image: url(https://picsum.photos/510/718?random=5);
}

a:nth-child(6) .slide {
  background-image: url(https://picsum.photos/510/718?random=6);
}

@-webkit-keyframes slide {
  10% {
    margin-left: 0px;
  }
  20% {
    margin-left: -728px;
  }
  28% {
    margin-left: -728px;
  }
  36% {
    margin-left: -1456px;
  }
  44% {
    margin-left: -1456px;
  }
  52% {
    margin-left: -2184px;
  }
  60% {
    margin-left: -2184px;
  }
  68% {
    margin-left: -2912px;
  }
  76% {
    margin-left: -2912px;
  }
  84% {
    margin-left: -3640px;
  }
  100% {
    margin-left: -3640px;
  }
}

<div id="slideshow">
  <div class="slide-wrapper">
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
    <a link href="">
      <div class="slide"></div>
    </a>
  </div>
</div>

Answer 2

您为每个 幻灯片 单独拍摄 class 个幻灯片，所以这里发生的总是第一个 child，您需要更改 CSS 喜欢下面

.slide-wrapper a:nth-child(1) .slide {
    background-image: url(https://wallpapercave.com/wp/1Odq43G.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.slide-wrapper a:nth-child(2) .slide {
    background-image: url(https://cdn.wallpapersafari.com/48/5/jR1olt.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.slide-wrapper a:nth-child(3) .slide {
    background-image: url(../site/fotos/muhammad\ ali\ 3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.slide-wrapper a:nth-child(4) .slide {
    background-image: url(../site/fotos/muhammad\ ali\ 4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.slide-wrapper a:nth-child(5) .slide {
    background-image: url(../site/fotos/muhammad\ ali\ 5.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.slide-wrapper a:nth-child(6) .slide {
    background-image: url(../site/fotos/muhammad\ ali\ 6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

所以最好的做法是像上面那样使用普通的 class 只需用这个

替换你的滑块图像 CSS

每张幻灯片的背景图像都不会改变

Background image doesn't change for each slide

html

css

css-selectors

pseudo-class

css-animations