使用css来实现幻灯片的效果

╰半夏微凉° 2022-04-12 12:59 402阅读 0赞

**使用css来实现幻灯片的效果**

（1）自动轮播，鼠标移入停止播放，鼠标移出继续播放，但是不能设置按钮自动播放，不能点击一个点跳转到对应的图片

思路：切换图片就是像上面js那样的想法，有一个大的容器装着所有的图片，每次想要切换一张图片的时候就用translate来执行左移，但是每次左移之后，我们又不希望立马左移下面一张图片，所以保留一段时间给这张照片停留在那里，所以这个时候下一帧的动画的translate应该跟上一张一样。

<!Doctype html>
    
    <html lang="en">
    
        <head>
    
            <meta charset="utf-8">
    
            <title></title>
    
            <style>
    
                .banner{
    
                    width: 640px;
    
                    height: 300px;
    
                    overflow: hidden;
    
                    margin: 20px auto;
    
                }
    
                .inner{
    
                    width: 3200px;
    
                    height: 300px;
    
                    position: relative;
    
                    animation: animate ease 16s infinite 2s running;
    
                }
    
                .innerwrapper{
    
                    width: 640px;
    
                    height: 300px;
    
                    float: left;
    
                }
    
                .innerwrapper img{
    
                    width: 640px;
    
                    height: 300px;
    
                }
    
    
    
                @keyframes animate {
    
                    0%{
    
                        transform: translateX(0px);
    
                    }
    
                    /*图片在这个期间进行切换，时间为16s*(5)% = 0.8s*/
    
                    5%{
    
                        transform: translateX(-640px);
    
                    }
    
                    /*图片在这个期间静止，时间为16s*(25-5)% = 1.2s*/
    
                    25%{
    
                        transform: translateX(-640px);
    
                    }
    
                    30%{
    
                        transform: translateX(-1280px);
    
                    }
    
    
    
                    50%{
    
                        transform: translateX(-1280px);
    
                    }
    
                    55%{
    
                        transform: translateX(-1920px);
    
                    }
    
                    75%{
    
                        transform: translateX(-1920px);
    
                    }
    
                    80%{
    
                        transform: translateX(-2560px);
    
                    }
    
                    100%{
    
                        transform: translateX(-2560px);
    
                    }
    
                }
    
            .inner:hover{
    
                animation-play-state: paused;
    
                }
    
    
    
            </style>
    
        </head>
    
        <body>
    
        <div class="banner">
    
            <div class="inner">
    
                <div class="innerwrapper"><img src="../img/1.jpg" alt="banner1"></div>
    
                <div class="innerwrapper"><img src="../img/2.jpg" alt="banner2"></div>
    
                <div class="innerwrapper"><img src="../img/3.jpg" alt="banner3"></div>
    
                <div class="innerwrapper"><img src="../img/4.jpg" alt="banner4"></div>
    
                <div class="innerwrapper"><img src="../img/1.jpg" alt="banner1"></div>
    
                
    
            </div>
    
        </div>
    
        </body>
    
    </html>

但是这样写是没有办法再添加点击切换的（纯css的状况下）

提供一种不是轮播，但是点击可以切换的代码

<!Doctype html>
    
    <html lang="en">
    
        <head>
    
            <meta charset="utf-8">
    
            <title></title>
    
            <style>
    
                .viewport {
    
                    width: 500px;
    
                    height: 500px;
    
                    position: relative;
    
                    overflow: hidden;
    
                }
    
                .wrap {
    
                    position: relative;
    
                    width: 1500px;
    
                    height: 500px;
    
                    overflow: hidden;
    
    
    
                }
    
                .wrap img {
    
                    display: inline-block;
    
                    width: 500px;
    
                    height: 500px;
    
                    float: left;
    
                }
    
    
    
                /*当pic1是选中状态的时候，选中它后面的wrap*/
    
    
    
                #pic1:checked ~ .wrap {
    
                    left: 0;
    
                    transition: 2s linear;
    
                }
    
                #pic2:checked ~ .wrap {
    
                    left: -500px;
    
                    transition: 2s linear;
    
                }
    
                #pic3:checked ~ .wrap {
    
                    left: -1000px;
    
                    transition: 2s linear;
    
                }
    
    
    
                .arrow label {
    
                    display: none;/*不显示*/
    
                    width: 2rem;
    
                    height: 2rem;
    
                    border-top: 1rem solid #000;
    
                    border-right: 1rem solid #000;
    
                    transform: rotate(-135deg);
    
                }
    
                /*设置选中后左箭头的样式*/
    
                #pic1:checked ~ .arrow label:nth-of-type(3),
    
                #pic2:checked ~ .arrow label:nth-of-type(1),
    
                #pic3:checked ~ .arrow label:nth-of-type(2) {
    
                    display: inline-block;
    
                    position: absolute;
    
                    top: 50%;
    
                    left: 5rem;
    
                }
    
            </style>
    
        </head>
    
        <body>
    
        <div class="viewport">
    
            <input type="radio" name="slider" id="pic1" checked>
    
            <input type="radio" name="slider" id="pic2">
    
            <input type="radio" name="slider" id="pic3">
    
            <div class="wrap">
    
                <img src="../img/1.jpg" alt="">
    
                <img src="../img/2.jpg" alt="">
    
                <img src="../img/3.jpg" alt="">
    
            </div>
    
            <div class="page">
    
                <label for="pic1"></label>
    
                <label for="pic2"></label>
    
                <label for="pic3"></label>
    
            </div>
    
            <div class="arrow">
    
                
    
                <label for="pic1"></label>
    
                <label for="pic2"></label>
    
                <label for="pic3"></label>
    
            </div>
    
        </div>
    
        </body>
    
    </html>