使用css实现图片轮播功能

功能实现：

先搭建一个用于轮播的容器，水平置入需要轮播的图片，设置图片大小为容器的大小，超出容器的部分隐藏显示

然后用动画使每次需要轮播时让图片向左平移容器的宽度，这样一个简单的轮播就做好了

 

废话不多说，世界上案例吧

 

 

界面搭建

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://img0.baidu.com/it/u=3680786760,2770549004&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1679590800&t=db941873459e76d84cc654c8aeca5387" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://img1.baidu.com/it/u=3407056370,3781557307&fm=253&fmt=auto&app=138&f=JPEG?w=705&h=500" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://img2.baidu.com/it/u=249362015,3629332179&fm=253&fmt=auto&app=138&f=JPEG?w=270&h=270" alt="">
            </div>
            <!-- 最后一张和第一次保持一致，用于无缝连接 -->
            <div class="swiper-slide">
                <img src="https://img0.baidu.com/it/u=3680786760,2770549004&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1679590800&t=db941873459e76d84cc654c8aeca5387" alt="">
            </div>
        </div>
    </div>
</body>

 

样式设置

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .swiper-container{
        width: 640px;
        height: 300px;
        margin: 0 auto;
        overflow: hidden;
    }
    .swiper-container img{
        width: 640px;
        height: 300px;
    }
    .swiper-slide{
        float: left;
    }
    .swiper-wrapper{
        width: 9999px;
        animation: swiperRun 5s  infinite; //infinite重复动画
    }
    .swiper-wrapper:hover{
        animation-play-state: paused;  //鼠标移上时暂停
    }
    
    //设置动画的节点需根据图片的数量进行设置,否则会出现后面图片不显示；向左平移的宽度为图片的宽度
    @keyframes swiperRun {
        0%{
            transform: translateX(0);
        }
        33%{
            transform: translateX(-640px); 
        }
        66%{
            transform: translateX(-1280px);
        }
        100%{
            transform: translateX(-1920px);
        }

    }

 

posted @ 2023-03-22 15:56  西瓜南瓜哈密瓜  阅读(196)  评论(0)    收藏  举报