纯csss实现轮播图效果

最新推荐文章于 2022-06-15 17:45:43 发布

Drizzlejj

最新推荐文章于 2022-06-15 17:45:43 发布

阅读量359

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/Drizzlejj/article/details/122015165

版权

1.先看效果，鼠标移入到图片，暂停轮播。

2.上码

<!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;}
        .swiper_container{
            margin: 0 auto;
            width: 500px;
            height: 200px;
            border: 5px solid pink;
            overflow: hidden;
        }
        .swiper_container img{
            width: 500px;
            height: 200px;
        }
        .swiper_wraper{
            width: 9999px;
            animation: swiperrun 10s linear infinite; /* 让它无限循环起来*/
        }
        .swiper_slide{
            float: left;
        }
        /*鼠标移入停住*/
        .swiper_wraper:hover{
            animation-play-state: paused;
        }
        @keyframes swiperrun{
            /*用百分之五的时间切换*/
            0%{transform: translate(0px);}
            5%{transform: translate(-500px);}
            /*用5% - 25% 的时间停住不动*/
            25%{transform: translate(-500px);}
            30%{transform: translate(-1000px);}

            50%{transform: translate(-1000px);}
            55%{transform: translate(-1500px);}

            75%{transform: translate(-1500px);}
            80%{transform: translate(-2000px);}

            100%{transform: translate(-2000px);}
        }
    </style>
</head>
<body>
    <div class="swiper_container">
        <div class="swiper_wraper">
            <div class="swiper_slide">
                <img src="./img/example01.jpg" alt="">
            </div>
            <div class="swiper_slide">
                <img src="./img/example02.jpg" alt="">
            </div>
            <div class="swiper_slide">
                <img src="./img/example03.jpg" alt="">
            </div>
            <div class="swiper_slide">
                <img src="./img/example04.jpg" alt="">
            </div>
            <!-- 为了实现无缝隙轮播，添加第一张和最后一张一模一样的 -->
            <div class="swiper_slide">
                <img src="./img/example01.jpg" alt="">
            </div>
        </div>
    </div>
</body>
</html>

3.利用了关键帧 animation 浮动，隐藏浮动等。

Drizzlejj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯csss实现轮播图效果

1.先看效果，鼠标移入到图片，暂停轮播。2.上码<!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-sca.
复制链接

扫一扫