html+css简单易懂的轮播图实现

实现轮播图感觉好复杂啊，这个比较简单的实现了

但是还是没有怎么理解代码，只能先发出来慢慢学习学习了

话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banner-box{
    height: 327px;
    width: 600px;
    overflow: hidden;
    /* 超出该标签的长高部分会被隐藏 */
}
.slide-box{
    height: 327px;
    width: 3000px;/*因为每张图的宽度是1920px，所以这里是1920px*5 的大小*/
    /* 动画属性 */
    /* animation:自定义关键帧 过度时间 过度效果 循环次数； */
    animation:aaa 10s ease-out infinite;
}
.slide-box img{
    float: left;
    width: 600px;
    height: 327px;
} 
@keyframes aaa{/*因为是五张图，所以分为5份，如果是4张就分为4份*/
    0%,19%{
        margin-left: 0;
    }
    20%,39%{
        margin-left: -600px;
    }
    40%,59%{
        margin-left: -1200px;
    }
    60%,79%{
        margin-left: -1800px;
    }
    80%,100%{
        margin-left: -2400px;
    }
}

    </style>
</head>
<body>
    <div class="banner-box">
        <div class="slide-box">
            <img src="521.jpg">
            <img src="520.jpg">
            <img src="521.jpg">
            <img src="520.jpg">
            <img src="521.jpg">
        </div>
    </div>
    
</body>
</html>

效果图如下所示：

 

 轮播图会自动轮播设置的图片。完毕。好好学习！！！

posted @ 2023-06-03 17:52  Mickeybo  阅读(874)  评论(0)  编辑  收藏  举报