CSS滑块

173
166
153
129
135
116
122
172

这是最简单的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中调整图片的显示间隔,则可以使轮播连续。

祝你创造性的成功。

Рекомендую: Готовые HTML шаблоны на русском

此条目发表在免费网站脚本分类目录。将固定链接加入收藏夹。
А так же:

发表评论

电子邮件地址不会被公开。 必填项已用*标注