Html CSS-每5秒滑动一次

我在我的网站（）上找到了这个滑块：

/*
唯一能阻止它被使用的东西
在较旧的浏览器中，“~”选择器位于
上一个CSS规则，但自从替换它之后
在乱七八糟的代码中，我让它保持原样。
*/

@导入url(http://fonts.googleapis.com/css?family=Varela+圆形）；
html，正文{
背景：#333 url（“http://codepen.io/images/classy_fabric.png");
}
.幻灯片{
填充：0；
宽度：609px；
高度：420px；
显示：块；
保证金：0自动；
位置：相对位置；
}
.幻灯片*{
用户选择：无；
-ms用户选择：无；
-moz用户选择：无；
-khtml用户选择：无；
-webkit用户选择：无；
-webkit触摸标注：无；
}
.slides输入{显示：无；}
.slide容器{display:block；}
.幻灯片{
排名：0；
不透明度：0；
宽度：609px；
高度：420px；
显示：块；
位置：绝对位置；
变换：比例（0）；
过渡：所有.7都易于输入输出；
}
.幻灯片图像{
宽度：100%；
身高：100%；
}
.导航标签{
宽度：200px；
身高：100%；
显示：无；
位置：绝对位置；
不透明度：0；
z指数：9；
光标：指针；
转变：不透明度；
颜色：#FFF；
字号：156pt；
文本对齐：居中；
线高：380px；
字体系列：“瓦雷拉圆形”，无衬线；
背景色：rgba（255、255、255、.3）；
文本阴影：0px 0px 15px rgb（119、119、119）；
}
.slide:hover+.nav标签{不透明度：0.5；}
.nav标签：悬停{不透明度：1；}
.nav.next{右：0；}
输入：选中+。幻灯片容器。幻灯片{
不透明度：1；
变换：比例（1）；
过渡：不透明度1s缓进缓出；
}
输入：选中+.幻灯片容器.导航标签{显示：块；}
.导航点{
宽度：100%；
底部：9px；
高度：11px；
显示：块；
位置：绝对位置；
文本对齐：居中；
}
.导航点.导航点{
顶部：-5px；
宽度：11px；
高度：11px；
利润率：0.4px；
位置：相对位置；
边界半径：100%；
显示：内联块；
背景色：rgba（0,0,0,0.6）；
}
.导航点.导航点：悬停{
光标：指针；
背景色：rgba（0,0,0,0.8）；
}
输入#img-1：选中~.导航点标签#img-dot-1，
输入#img-2：选中~.导航点标签#img-dot-2，
输入#img-3：选中~.导航点标签#img-dot-3，
输入#img-4：选中~.导航点标签#img-dot-4，
输入#img-5：选中~.导航点标签#img-dot-5，
输入#img-6：选中~.导航点标签#img-dot-6{
背景：rgba（0,0,0,0.8）；
}

‹；
›；


‹；
›；


‹；
›；


‹；
›；


‹；
›；


‹；
›；

它不会因为代码而滑动。多亏了单选按钮和

：选中的
伪类：



输入：选中+.幻灯片容器.幻灯片{
不透明度：1；
变换：比例（1）；
过渡：不透明度1s缓进缓出；
}

因此，正如目前编写的那样，如果不使用JS，就无法实现任何自动化，因为有了CSS，就无法更改广播框的状态

如果您想要自动化，您可以尝试使用属性而不是收音机。但是这样你就不能手动滑动了。
好的！看来我得用JS做一个小片段了。我会接受这个答案，因为我只需要知道这些