用@keyframe实现图片轮播

最新推荐文章于 2023-11-06 11:31:21 发布

星星的泪痕

最新推荐文章于 2023-11-06 11:31:21 发布

阅读量2.3k

点赞数 1

分类专栏： css html

本文链接：https://blog.csdn.net/x311609001028/article/details/103898582

版权

html 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

通过keyframe实现4张图片轮播

通过无序列表放置5张图片，第5张和第1张相同，使当第4张播放时后方不会出现空白

每个li放置一张，li浮动，使图片位于一行，超出框子的隐藏（框子设置overflow:hidden;）

通过ul向左移动，第四张移出后返回原位，再次重复移动，实现轮播的效果

未隐藏时效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        /* 轮播框子设置宽为图片宽度，高为图片高*/
        .box1{
            width: 300px;
            height: 200px;
            margin: 100px 0 0 100px;
            border: 1px solid black;
            position: relative;
            /* 超出框架范围的图片隐藏掉 */
            overflow: hidden;
            float: left;
        }
        ul宽度为5张图片宽度，高为图片高
        .box1 ul{
            width: 1500px;
            height: 200px;
            position: relative;
            animation: lp 4s infinite;
        }
        /* 左浮动，使图片位于一行 */
        .box1 ul li{
            float: left;
        }
        /* 图片宽，高 */
        .box1 img{
            width: 300px;
            height: 200px;
        }
        /* 每25%移动一张图片宽度的距离 */
        @keyframes lp{
            0%{left: 0;}
            25%{left: -300px;}
            50%{left: -600px;}
            75%{left: -900px;}
            100%{left: -1200px;}
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li><img src="imgs/pic1.jpg" alt=""></li>
            <li><img src="imgs/pic2.jpg" alt=""></li>
            <li><img src="imgs/pic3.jpg" alt=""></li>
            <li><img src="imgs/pic4.jpg" alt=""></li>
            <!-- 第5张和第一张相同 -->
            <li><img src="imgs/pic1.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

星星的泪痕

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
用@keyframe实现图片轮播

通过keyframe实现4张图片轮播通过无序列表放置5张图片，第5张和第1张相同，使当第4张播放时后方不会出现空白每个li放置一张，li浮动，使图片位于一行，超出框子的隐藏（框子设置overflow:hidden;）通过ul向左移动，第四张移出后返回原位，再次重复移动，实现轮播的效果未隐藏时效果图<!DOCTYPE html><html lan...
复制链接

扫一扫

专栏目录