javascript - 如何仅使用 css 或 jquery 自动播放轮播

Question

我有一个使用 CSS 构建的轮播:

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

I tried using CSS, but I can't figure out how to autoplay the carousel using only CSS. Only CSS would be ideal.

Can I do this in CSS?

是的，您只需使用 css 即可实现轮播或幻灯片效果animation ;可能包括css transition ，取决于预期的渲染效果。

后期方法使用单<div>元素具有data-*属性设置为存储要显示在 content 的内容:after的属性(property)div 的伪元素元素。

多个元素也可以组合成单个动画周期。检查单个或多个元素的动画效果状态之间转换时的重叠而不渲染先前动画状态的部分将是需求中最乏味的部分。

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>