Question

我正在上课的HTML / CSS幻灯片显示，并且图像相互堆叠时遇到问题。我首先用5张图片制作了幻灯片，效果很好。我必须使用10张图像，但是当我编辑使用10张图像时，它在每张幻灯片上将两个图像堆叠在一起。是否偶然，第一个图像堆叠在第6个图像的顶部，第二个图像堆叠在第7个图像，依此类推。然后，幻灯片放映将以空白幻灯片继续，直到动画时间到期为止。我不想使用JavaScript，但是如果不可避免，那么可能就是问题所在。任何帮助表示赞赏。

#slider
{
    overflow: hidden;
}

#slider figure
{
    position: relative;
    width: 500%;
    margin: 2px;
    left: 0;
    animation: 25s slider infinite;
    
}

#slider figure img
{
    float: left;
    width: 20%;
    height: 600px;
    overflow: hidden;
}

@keyframes slider
{
    0%{left: 0%;}9%{left: 0%;}
    10%{left: -100%;}19%{left: -100%;}
    20%{left: -200%;}29%{left: -200%;}
    30%{left: -300%;}39%{left: -300%;}
    40%{left: -400%;}49%{left: -400%;}
    50%{left: -500%;}59%{left: -500%;}
    60%{left: -600%;}69%{left: -600%;}
    70%{left: -700%;}79%{left: -700%;}
    80%{left: -800%;}89%{left: -800%;}
    90%{left: -900%;}100%{left: -1000;}
}

<!doctype html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Slideshow</title>
    <link rel="stylesheet" type="text/css" href="styles_lab4.css">


    </head>

    <body>
        <div id="slider">
            <figure>
                <img src="img_Castle_Mountain.jpg" alt="Castle_Mountain">   
                <img src="img_Crest_dil_Cut_and_Crest_Ault.jpg">
                <img src="img_Durmitor_mountains.jpg">
                <img src="img_Eisriesenwelt,_Macizos_de_Tennen,_Austria.jpg">
                <img src="img_Vang_Vien_Mountains.jpg">
                <img src="img_Panoramaweg_tussen_Waltensburg-Vuorz_en_Breil-Brigels.jpg">
                <img src="img_Crowfoot_Mountain_and_Glacier.jpg">
                <img src="img_UlvikfjordMountains.jpg">
                <img src="img_The_Mountain_Exhaled.jpg">
                <img src="img_Mountain_Village_S-carl.jpg">
            </figure>
        </div>
    

    </body>
</html>

HTML幻灯片叠加图像

0 个答案: