这是最简单的CSS滑块。
这种滑块的优点包括易用性和安全性，以及即使是新手网站管理员也可以在您的网站上完成和安装。
缺点是不可能单独在CSS上重复循环。
但是如果你认为八张图片的滚动时间超过30秒，那么这个时间足以让访问者查看该页面。
如果滑块安装在网站的标题中，那么没人会考虑半分钟。
图片外观的效果可以根据自己的喜好进行更改，并符合CSS3的功能。 让我们看看它在哪里以及如何完成。
代码:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>CSS滑块</title>
<style>
/* 滑块 */
#slaid {
/* 设置相对定位 */
position: relative;
/*Размер и рамка блока*/
width: 400px;
height: 200px;
border: 2px solid #333;
border-radius: 5px;
}
/* 7张图片的组选择器 */
.image1,
.image2,
.image3,
.image4,
.image5,
.image6,
.image7 {
/* 我们绝对相对于块位置。 */
position: absolute;
/* 使它们完全透明。 */
opacity: 0;
width: 400px;
height: 200px;
}
/* 我们将动画连接到第一张图片 */
.image1{
animation: one-image 8s 1s ease alternate;
}
/* 以下图片是动画的，在滚动所需的前一图像的开始处有延迟。й */
.image2 {
animation: two-image 8s 5s ease alternate;
}
.image3 {
animation: three-image 8s 10s ease alternate;
}
.image4 {
animation: four-image 8s 14s ease alternate;
}
.image5 {
animation: five-image 8s 18s ease alternate;
}
.image6 {
animation: six-image 8s 22s ease alternate;
}
.image7 {
animation: seven-image 8s 26s ease alternate;
}
/* 滚动后，最后一个图像不透明仍然可见 */
.image8 {
position: absolute;
width: 400px;
height: 200px;
animation: eight-image 34s ease alternate;
}
/* 第一张照片的动画 */
@keyframes one-image{
/* 设置透明度的变化。 在这里，您可以添加旋转，从块外部移动或从中心外观（缩放） */
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* 动画为接下来的6张照片 */
@keyframes two-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes three-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes four-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes five-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes six-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes seven-image{
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* 第八个剪贴画的动画 */
@keyframes eight-image{
/* 保持透明，直到前一个滚动 */
0% {
opacity: 0;
}
87% {
opacity: 0;
}
/*在滑块的末尾变得可见 */
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div id="slaid">
<img class="image1" src="images/172.jpg">
<img class="image2" src="images/166.jpg">
<img class="image3" src="images/153.jpg">
<img class="image4" src="images/129.jpg">
<img class="image5" src="images/135.jpg">
<img class="image6" src="images/116.jpg">
<img class="image7" src="images/122.jpg">
<img class="image8" src="images/173.jpg">
</div>
</body>
</html>
以防万一 — 为了有机会再次滚动滑块，您可以添加以下代码：
<script>
var CLN; onload = function () {CLN = document.getElementById ('slaid').cloneNode (3)}
</script>
<input type="button" value="再看一遍" onclick="var obj = document.getElementById ('slaid'); obj.parentNode.replaceChild (CLN, obj)">
同时，滑块下方会出现一个按钮，您可以根据需要进行命名并在CSS中绘制。
附： 如果您尝试在@keyframes中调整图片的显示间隔，则可以使轮播连续。
祝你创造性的成功。
