【前端学习笔记】仅用CSS实现图片轮播效果

猪猪爱芮芮

已于 2022-04-10 18:02:07 修改

阅读量909

点赞数 2

分类专栏：前端文章标签：前端 css 学习

于 2022-02-25 20:23:40 首次发布

本文链接：https://blog.csdn.net/qq_43118757/article/details/123140266

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图

请添加图片描述

实现原理

swiper-container为窗口
swiper-wrapper用于存放所有图片
swiper-slide用于存放每张图片

请添加图片描述
通过将图片向左移动实现轮播效果

实现代码

<!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 {
            width: 590px;
            height: 470px;
            margin: 10px auto;
            /* 溢出部分隐藏 */
            overflow: hidden;
        }
        
        .swiper-container img {
            width: 590px;
            height: 470px;
        }
        
        .swiper-wrapper {
            /* 将长度设置较大以便存放所有图片 */
            width: 9999px;
            /* 
              设置动画属性
              swiperrun 关键帧动画名称
              12s 动画时长
              linear 匀速移动
              infinite 循环播放  */
            animation: swiperrun 12s linear infinite;
        }
        /* 定义关键帧动画 */
        
        @keyframes swiperrun {
            0% {
                transform: translateX(0);
            }
            20% {
                transform: translateX(0);
            }
            25% {
                /* 每次向左移动一张图片的宽度 */
                transform: translateX(-590px);
            }
            /* 并停留20%的时间 */
            45% {
                transform: translateX(-590px);
            }
            50% {
                transform: translateX(-1180px);
            }
            70% {
                transform: translateX(-1180px);
            }
            75% {
                transform: translateX(-1770px);
            }
            95% {
                transform: translateX(-1770px);
            }
            100% {
                transform: translateX(-2360px);
            }
        }
        
        .swiper-wrapper:hover {
            /* 指针移动到图片上便暂停滚动 */
            animation-play-state: paused;
        }
        
        .swiper-slide {
            float: left;
        }
    </style>
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="lb1.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="lb2.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="lb3.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="lb4.png" alt="">
            </div>
            <!-- 为了实现无限轮播 将第一张图复制一份放在最后 -->
            <div class="swiper-slide">
                <img src="lb1.png" alt="">
            </div>
        </div>
    </div>
</body>

</html>

欢迎关注

掘金：https://juejin.cn/user/4156573190724030
Github：https://github.com/zhubingran
CSDN：https://blog.csdn.net/qq_43118757
QQ：1330022055

猪猪爱芮芮

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
【前端学习笔记】仅用CSS实现图片轮播效果

效果图实现原理swiper-container为窗口swiper-wrapper用于存放所有图片swiper-slide用于存放每张图片通过将图片向左移动实现轮播效果实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫

专栏目录