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

发布于 2023-06-03 17:52 • 效果实现

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

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

话不多说，直接上代码

<!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>

效果图如下所示：

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

CSS HTML 轮播图效果实现

作者：|Mickeybo|，原文链接: https://www.cnblogs.com/Mickeybo101/p/17454322.html

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

文章推荐

Django自定义视图类及实现请求参数和返回参数加解密

C语言访问数据对象在内存中真实位模式的一个方法

深入理解 python 虚拟机：破解核心魔法——反序列化 pyc 文件

Redis - 数据类型映射底层结构

Java SpringBoot 加载 yml 配置文件中字典项

v-if与v-show造成部分元素丢失的问题——v-if复用元素问题

Java并发(一)----进程、线程、并行、并发

SpringBoot集成SpringBootAdmin实现监控

C++内存重叠

apache服务资源监控

一个恢复CSI挂载信息的解决方法

通过一次生产case深入理解tomcat线程池