Skip to main content

纯CSS实现轮播图

效果​

解析​

DOM结构​

<div class="slider">
    <ul class="slider-container">
        <li class="image-container"><img src="./images/1.webp" /></li>
        <li class="image-container"><img src="./images/2.webp" /></li>
        <li class="image-container"><img src="./images/3.webp" /></li>
        <li class="image-container"><img src="./images/4.webp" /></li>
    </ul>
</div>

CSS​

tip

每轮动画时间是10s。
每张图片的动画位置不动时，占总动画时长的20%，所以停留的时长是：10s x 20% = 2s。
切换图片时，占总动画时长的5%，所以切换的时长是：10s x 5% = 0.5s。 

/* 每张轮播图定宽高 */
img{ width: 600px; height:230px;}

/* 定可视窗口大小 */
.slider{
    width: 600px;
    height: 230px;
    overflow: hidden;
    position: relative;
}
/* 图片容器定宽，刚好一行过，可以装下所有图片 */
.slider-container{
    width: 400%; /* 4张图，所以是400% */
    height: 100%;
    position: absolute;
    top: 0; 
    left:0;
    transform: translateX(0);
    animation: slider-image 10s linear infinite; /* 定动画切换效果 */
}
.image-container{
    float: left;
}

@keyframes slider-image{
    0%{
        transform: translateX(0);
    }
    20%{
        transform: translateX(0);
    }

    25%{
        transform: translateX(-25%);
    }
    45%{
        transform: translateX(-25%);
    }

    50%{
        transform: translateX(-50%);
    }
    70%{
        transform: translateX(-50%);
    }

    75%{
        transform: translateX(-75%);
    }
    95%{
        transform: translateX(-75%);
    }

    100%{
        transform: translateX(0);
    }

}

附源码​

<!DOCTYPE html>
<head>
    <title>css轮播动画</title>
    <style>
        ul, li{ margin:0; padding:0; }
        li::marker{display:none;}
        img{ width: 600px; height:230px;}
        .slider{
            width: 600px;
            height: 230px;
            overflow: hidden;
            position: relative;
        }
        .slider-container{
           width: 400%;
           height: 100%;
           position: absolute;
           top: 0; 
           left:0;
           transform: translateX(0);
           animation: slider-image 10s linear infinite;
        }
        .image-container{
            float: left; /* 图片统一左浮动，才能一张接到下一张 */
        }

        @keyframes slider-image{
            0%{
                transform: translateX(0);
            }
            20%{
                transform: translateX(0);
            }

            25%{
                transform: translateX(-25%);
            }
            45%{
                transform: translateX(-25%);
            }

            50%{
                transform: translateX(-50%);
            }
            70%{
                transform: translateX(-50%);
            }

            75%{
                transform: translateX(-75%);
            }
            95%{
                transform: translateX(-75%);
            }

            100%{
                transform: translateX(0);
            }

        }
    </style>
</head>
<body>
    <div class="slider">
        <ul class="slider-container">
            <li class="image-container"><img src="./images/1.webp" /></li>
            <li class="image-container"><img src="./images/2.webp" /></li>
            <li class="image-container"><img src="./images/3.webp" /></li>
            <li class="image-container"><img src="./images/4.webp" /></li>
        </ul>
    </div>
</body>
</html>
Last updated on