纯CSS实现轮播图（结合动画）

原创已于 2022-08-17 23:18:40 修改 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

于 2022-08-17 23:17:23 首次发布

html+css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS3实现一个轮播图功能，包括图片自动切换的原理，通过设置溢出隐藏及内部div布局，结合伪类创建导航点，并利用动画实现图片的平滑切换。动画效果通过animation属性设置，确保了第一张图片的停留时间及平滑过渡。

图片自动切换实现原理：使用一个div（class="out"）并设置溢出隐藏保证每次只显示一张，在内部设置另一个div.outer包裹所有的图片,图片均水平排列，包裹图片的div使用伪类添加一个黑色的点（黑点设置在底部中间，通过计算点的宽度为9px，间距为6px，设置好6个点的位置），在.out下再加一个div来设置6个空心圆。动画实现图片切换，让.outer向右移动，使用animation: move 12s steps(6) 2s;即动画延迟2s动（保证第一张图片停两秒），重复一次move动画12s。

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .outer::after {
            content: '';
            display: block;
            clear: both;
        }

        .out {
            top: 25px;
            width: 1000px;
            height: 700px;
            margin: 0px auto;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 3px gray;

        }

        .outer {
            width: 1000px;
            height: 700px;
            margin: 0px auto;
            animation: move 10s steps(6) 2s infinite;
            position: relative;
        }

        img {
            width: 100%;
            margin-top: 35px;
        }

        .outer>div {
            top: 0;
            bottom: 0;
            width: 100%;
            position: absolute;
        }

        .outer>div::after {
            content: '';
            display: block;
            height: 9px;
            width: 9px;
            border-radius: 50%;
            position: absolute;
            background-color:black;
            bottom: 15px;
            z-index: 999;
        }

        .outer>div:nth-child(1)::after {
            left: 458px
        }
        .outer>div:nth-child(2)::after {
            left: 473px
        }
        .outer>div:nth-child(3)::after {
            left: 488px
        }
        .outer>div:nth-child(4)::after {
            left: 503px
        }
        .outer>div:nth-child(5)::after {
            left: 518px
        }
        .outer>div:nth-child(6)::after {
            left: 533px
        }
        .outer>div:nth-child(1) {
            left: 0;
        }

        .outer>div:nth-child(2) {
            left: -1000px;
        }

        .outer>div:nth-child(3) {
            left: -2000px;
        }

        .outer>div:nth-child(4) {
            left: -3000px;
        }

        .outer>div:nth-child(5) {
            left: -4000px;
        }

        .outer>div:nth-child(6) {
            left: -5000px;
        }
        .dot{
            display: flex;
            gap: 6px;
            position: absolute;
            height: 9px;
            width: 84px;
            bottom: 15px;
            left: 0px;
            right: 0;
            margin: auto;
        }
        .dot>div{
            height: 9px;
            width: 9px;
            border-radius: 50%;
            border:2px solid gray;
        }
        @keyframes move {
            from {
                left: 0px;
            }

            to {
                left: 6000px;
            }
        }
        div:hover{
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div class="out">
        <div class="outer">
            <div><img src="./1.jpeg" alt=""></div>
            <div><img src="./2.jpeg" alt=""></div>
            <div><img src="./3.jpeg" alt=""></div>
            <div><img src="./4.jpg" alt=""></div>
            <div><img src="./5.jpg" alt=""></div>
            <div><img src="./6.jpg" alt=""></div>
        </div>
        <div class="dot">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div> 
            <div></div> 
        </div>
    </div>

</body>

</html>

纯CSS实现轮播图（结合动画）