如何仅使用css或jquery自动播放旋转木马

Question

我有一个使用CSS构建的carousel：

https://jsfiddle.net/1y78zgvu/

下面是CSS：

.landing-quotes {
  color: #284660;
  text-align: center;
  padding: 100px 0 35px 0;
}
.landing-quotes .landing-quotes-list {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 90%;
  max-width: 1110px;
}
.landing-quotes .carousel-open:checked + .carousel-item {
  position: static;
  opacity: 100;
}
.landing-quotes .carousel-item {
  margin: 0 auto 80px auto;
  position: absolute;
  min-height: 245px;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.landing-quotes blockquote {
  display: block;
  margin: 0 auto;
  vertical-align: top;
  width: 100%;
}
.landing-quotes blockquote p {
  font-family: "minion-pro-display", serif;
  margin-bottom: 25px;
  font-size: 3.07em;
  text-align: center;
  line-height: 1.4;
  quotes: "“" "”" "‘" "’";
}
.landing-quotes blockquote p:before {
  content: open-quote;
}
.landing-quotes blockquote p:after {
  content: close-quote;
}
.landing-quotes blockquote footer cite {
  line-height: 1;
  font-family: adobe-clean, sans-serif;
  font-size: 1.23em;
  font-weight: 400;
}
.landing-quotes .carousel-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}
.landing-quotes .carousel-indicators li {
  display: inline-block;
  margin: 0 10px;
}
.landing-quotes .carousel-indicators li:first-child {
  margin-left: 0;
}
.landing-quotes .carousel-indicators li:last-child {
  margin-right: 0;
}
.landing-quotes .carousel-bullet {
  width: 12px;
  height: 12px;
  outline: none;
  border: 3px solid #284660;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  display: block;
}
.landing-quotes .carousel-bullet:hover {
  background-color: #284660;
}
.landing-quotes #carousel-1:checked ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
.landing-quotes #carousel-2:checked ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
.landing-quotes #carousel-3:checked ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
  background-color: #284660;
}

如何仅使用CSS触发旋转木马自动播放？如果这是不可能的，我如何使用jquery来做到这一点？我尝试使用CSS，但我不知道如何仅使用CSS自动播放转盘。只有CSS才是理想的。

到目前为止，我的JQuery代码如下：

    setInterval(function () {
        var carouselOpen$ = $( "input.carousel-open"),
            index = carouselOpen$.index(":checked"),
            len = carouselOpen$.length;

        console.debug(index);
        if (index >= 0) {
            carouselOpen$.eq(index).attr( "checked", false );

            if ((index + 1) >= len) {
                index = 0;
            } else {
                index += 1;
            }
            console.log(len);
            console.debug(index);
            carouselOpen$.eq(index).attr( "checked", true );
        }
    }, 5000);

由于某种原因，它不能工作。我能在CSS中做到这一点吗？

Answer 1

我试过使用CSS，但我不知道如何仅使用CSS自动播放旋转木马。只有CSS才是理想的。

我能在CSS中做到这一点吗？

可以，您可以仅使用css animation实现旋转木马或幻灯片效果；根据预期的渲染效果，可能会包含css transition。

post时的方法使用具有data-*属性的单个<div>元素来存储要在div元素的:after伪元素的content属性处显示的内容。

还可以将多个元素组合到单个动画循环中。在不渲染先前动画状态的部分的情况下检查单个或多个元素的动画效果的状态之间的转换时的重叠将是最繁琐的需求部分。

​

div {
  color: #fffff0;
  width: 90vw;
  height: 90vh;
  position: absolute;
  display: block;
  outline: 4px solid gold;
  text-shadow: -0.025em 0.15em #000;
}
div:after {
  white-space: pre;
  opacity: 0;
  content: "";
  border: 1px solid gold;
  font-size: 0px;
  width: 90vw;
  height: 90vh;
  position: absolute;
  display: block;
  text-align: center;
  position: relative;
  transition: all 5s;
  animation-name: cycle;
  animation-duration: 15s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes cycle {
  0% {
    background: sienna;
    border: 1px solid purple;
    opacity: .75;
    font-size: 0px;
    content: attr(data-a);
  }
  16% {
    border: 1px solid gold;
    background: purple;
    opacity: 1;
    font-size: 36px;
    content: attr(data-a);
  }
  33% {
    background: sienna;
    border: 1px solid purple;
    opacity: 0.75;
    font-size: 0px;
    content: attr(data-a);
  }
  34% {
    content: attr(data-b);
  }
  50% {
    background: purple;
    border: 1px solid gold;
    opacity: 1;
    font-size: 36px;
    content: attr(data-b);
  }
  66% {
    background: sienna;
    border: 1px solid purple;
    opacity: .75;
    font-size: 0px;
    content: attr(data-b);
  }
  67% {
    content: attr(data-c);
  }
  83% {
    background: purple;
    border: 1px solid gold;
    opacity: 1;
    font-size: 36px;
    content: attr(data-c);
  }
  100% {
    background: sienna;
    border: 1px solid purple;
    opacity: .75;
    font-size: 0px;
    content: attr(data-c);
  }
}

<div data-a="'I am really impressed.'
Dala Et, Photographer" data-b="'I am really impressed.'
Era La, Actor" data-c="'I couldn't have asked.'
Bapo Bapo, Programmer"></div>

​