使用CSS完成跑马灯图片轮换效果

最新推荐文章于 2024-09-03 20:40:28 发布

李建雨

最新推荐文章于 2024-09-03 20:40:28 发布

阅读量2.7k

点赞数 3

文章标签： css css3 前端 html html5

本文链接：https://blog.csdn.net/m0_55944058/article/details/121323643

版权

该博客介绍了如何使用CSS创建一个图片轮播展示，确保最多同时显示3张图片。HTML结构包括一个div容器，一个ul列表，以及li元素内的img标签。CSS中使用了动画关键帧@keyframes实现图片的平移效果，通过设置overflow为hidden和绝对定位来隐藏超出部分并实现轮播。当鼠标悬停在图片上时，动画暂停，提供了良好的用户体验。

摘要由CSDN通过智能技术生成

需求：使用css使7张图片在浏览器中央轮转显示，最多能完整的显示3张图片。

过程：

html层面，使用link标签引入css，使用div盒子盛放ul，在ul中的10个li中创建（7+3）个img标签，前7个img按顺序盛放1到7号图片，后3个盒子重复盛放1到3号图片。通过使用动画来让ul整体移动带动图片的移动从而达到图片轮播的目的，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <link rel="stylesheet" href="./css/跑马灯.css">
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/6.jpg" alt=""></li>
            <li><img src="./images/7.jpg" alt=""></li>
            <!-- 解决滚动问题的关键在于在最后加三张图片 使末尾留白有内容 -->
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <!-- 将末尾三张图换成一样的就能理解原理 -->
        </ul>
    </div>
</body>

</html>

css层面，由于需要盒子来盛放图片，因此需要使用通配符选择器清除内外边距。


/* 通配符选择器来清除内外边距 */
* {
    margin: 0;
    padding: 0;
}

.box {
    /* 我们不想看到超出盒子范围的图片，因此需要overflow：hidden；进行隐藏 */
    overflow: hidden;
    /* 子绝父相，对div盒子设置相对定位 */
    position: relative;
    width: 600px;
    height: 150px;
    border: 3px solid #000;
    margin: 100px auto;
}
.box:hover ul {
    /* 当鼠标放在图片上的时候能够暂停动画 */
    animation-play-state:paused ;
}
ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 2000px;
    height: 150px;
    animation: run 5s infinite linear;
}

li {
    float: left;
    width: 200px;
    height: 150px;
    list-style: none;
}



img {
    /* 设置一张图片的宽度高度 */
    width: 200px;
    height: 150px;
}

@keyframes run {
    0% {
        transform: translate(0);
    }

    100% {
 /* 轮播宽度还是按照原来的7张图片进行设置 这样在播完7张图片后就会跳转回第一张*/
        transform: translate(-1400px);
    }
}

让我们看看效果吧