CSS3幻灯片不知道幻灯片的数量 [英] CSS3 slideshow without knowing the number of slides

问题描述

由于 CSS3 的发展，有越来越多试图创建仅仅基于 CSS3 不使用的JavaScript 。有 CSS3 为主的幻灯片的几个例子，但有一点始终缺乏：

Since the development of CSS3, there are growing attempts to create browser-based effects (transitions and animations) merely based on CSS3 without using JavaScript. There are several examples of CSS3-based slideshows, but one thing is always lacking:

创建 CSS3 幻灯片的常用方法是诱导每张幻灯片时序延迟。因此，我们需要知道幻灯片的数量，并添加 CSS 规则每个对应的元素。

The common method for creating CSS3 slideshow is to induce sequencing delay for each slide. Thus, we need to know the number of slides and add a CSS rule for each corresponding element.

我很好奇，如果有另一种方法来循环 CSS3 幻灯片播放，而无需元素的数目？

I am curious if there is another method to cycle a CSS3 slideshow without having the number of elements?

推荐答案

使用开始，以选择，以避免各对应元素的规则：

Use the starts-with selector to avoid a rule for each corresponding element:

section[id^=slide]:target {
opacity: 1;
z-index: 1;
-moz-transform: translate(0, 0);
}

section[id^=slide]:target ~ section[id^=slide] {
-moz-transform: translate(110%, 0);
}

参考文献：

• 纯CSS幻灯片

• Pure CSS Slides

这篇关于CSS3幻灯片不知道幻灯片的数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！