Question

我想使用此图片滑块：http://codepen.io/rslglover/pen/DBvoA

图像滑块效果很好，但完成后会停止。我无法看到与CodePen代码和我所做的不同之处。它如何在CodePen链接中起作用？

article{
position: absolute;
left: 450px;
background: #292929;
color: #e3e3e3;
width: 450px;
height: 450px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 0px;
}

article:nth-of-type(1){
animation: slideIn 50s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 50s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 50s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 50s linear 15s infinite;
}
article:nth-of-type(5){
animation: slideIn 50s linear 20s infinite;
}
article:nth-of-type(6){
animation: slideIn 50s linear 25s infinite;
}
article:nth-of-type(7){
animation: slideIn 50s linear 30s infinite;
}
article:nth-of-type(8){
animation: slideIn 50s linear 35s infinite;
}
article:nth-of-type(9){
animation: slideIn 50s linear 40s infinite;
}
article:nth-of-type(10){
animation: slideIn 50s linear 45s infinite;
}

@keyframes slideIn{
0% {left: 450px;}
1% {left: 0;}
10% {left: 0;}
11% {left: -450px;}
100%{left: -450px;}
}

.galleryImg {
height: 450px;
width: 450px;
}

.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff; 
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}

我的HTML

<div class="galleryInfo">
    <div class="gallery">
<article><img class="galleryImg" src="images/aa2.png" alt=""></article>
<article> <img class="galleryImg" src="images/aa1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb2.png" alt=""></article>
</div>
</div>

Answer 1

检查出来：
HTML：

<div class="galleryInfo">
    <div class="gallery">
<section>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
</section>
      </div>
</div>

CSS：

html{
  background: #aaa; 
}

section{
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  top: 1em;
  margin-left: -100px;
  overflow: hidden;
  background: #292929;
  border: 10px solid #fff;
}

/*section:hover article{
  animation-play-state: paused;
}*/

article{
  position: absolute;
  left: 450px;
  background: #292929;
  color: #e3e3e3;
  width: 450px;
  height: 450px;
  text-align: center;
  font: 2em/1em sans-serif;
  border-box: box-sizing;
  padding-top: 0px;
}

.galleryImg {
height: 450px;
width: 450px;
}

.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff; 
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}

article:nth-of-type(1){
  animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
  animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
  animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
  animation: slideIn 20s linear 15s infinite;
}

@keyframes slideIn{
  0% {left: 200px;}
  1% {left: 0;}
  10% {left: 0;}
  11% {left: -200px;}
  100%{left: -200px;}
}

或者更改动画上方的css文件clas galleryInfo和gallery中的位置。

Answer 2

动画似乎停止的主要原因是因为CSS是为10张幻灯片构建的。

要保持相同的持续时间和动画，需要为正在使用的新幻灯片总数配置关键帧百分比。

@keyframes slideIn{
    0% {left: 200px;} /* Always 0% */
    2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */
    25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */
    27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */
    100%{left: -200px;} /* Always 100% */
}

通过更改关键帧，您将保持与您的codepen示例相同的幻灯片速度。

这是一个工作片段。

html{
  background: #aaa; 
}

section{
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  top: 1em;
  margin-left: -100px;
  overflow: hidden;
  background: #292929;
  border: 10px solid #fff;
}

/*section:hover article{
  animation-play-state: paused;
}*/

article{
  position: absolute;
  left: 200px;
  background: #292929;
  color: #e3e3e3;
  width: 200px;
  height: 200px;
  text-align: center;
  font: 2em/1em sans-serif;
  border-box: box-sizing;
  padding-top: 80px;
}

/*
 * As each slide's animation is 5s, the set duration is totalSlides * 5.
 */ 
article:nth-of-type(1){
  animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
  animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
  animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
  animation: slideIn 20s linear 15s infinite;
}

@keyframes slideIn{
  0% {left: 200px;} /* Always 0% */
  2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */
  25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */
  27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */
  100%{left: -200px;} /* Always 100% */
}

<section>
  <article>Slide 1</article>
  <article>Slide 2</article>
  <article>Slide 3</article>
  <article>Slide 4</article>
</section>

图像滑块 - 循环不起作用

2 个答案: