用flex布局实现图片轮播

风哑

已于 2022-05-22 21:22:30 修改

阅读量2k

点赞数 2

分类专栏：前端_css效果文章标签： css3 html 动画

于 2022-03-14 15:26:47 首次发布

本文链接：https://blog.csdn.net/A_Common_Man/article/details/123468712

版权

前端_css效果专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言：今天学了flex布局，感觉比起浮动实现图片轮播要好一点，因为flex的弹性容器没有脱标，可放在页面中的任意位置，省去了清除浮动的麻烦。

话不多说，先看效果：

以下是实现步骤：

第一步：确定要展示内容的窗口大小（这里我有八张内容，但是让窗口只展示四张）

效果图：

第二步：复制前四张图片放在主体图片的后面，并且设置ul为flex布局，同时设置ul的宽为12(8+4)张图片的宽度，顺便固定图片的宽高。（这一步的意义在于：让ul里的图片水平排列，且主体图片超出盒子后有替换的图片可以填上，营造一种无限轮播的错觉）

效果图：

第三步：给li设置flex布局，让图片和文字居中，同时定义向左轮播的动画

效果图：

第四步：给盒子设置溢出隐藏，然后设置鼠标悬停让动画停下，同时给li添加一点鼠标悬停的效果

效果图：

最后附上代码：

<!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">
  <link rel="stylesheet" href="./css/demo.css">
  <title>商品跑马灯轮播</title>
</head>

<body>
  <div class="lunbo">
    <ul>
      <!-- 先准备8个li，用于存放主要图片，a标签用于点击跳转 -->
      <li>
        <a href="">
            <img src="./uploads/clothes_goods_1.jpg" alt="">   
            <h4>我是商品图片的标题</h4>
            <p>我是商品图片的描述</p>   
        </a>
      </li>
      <li>
        <a href="">  
            <img src="./uploads/clothes_goods_2.jpg" alt="">    
            <h4>我是商品图片的标题</h4>
            <p>我是商品图片的描述</p>     
        </a>
      </li>
      <li>
        <a href="">    
            <img src="./uploads/clothes_goods_3.jpg" alt="">    
            <h4>我是商品图片的标题</h4>
            <p>我是商品图片的描述</p>    
        </a>
      </li>
      <li>
        <a href=""> 
            <img src="./uploads/clothes_goods_4.jpg" alt="">    
            <h4>我是商品图片的标题</h4>
            <p>我是商品图片的描述</p>   
        </a>
      </li>
      <li>
        <a href="">      
            <img src="./uploads/clothes_goods_5.jpg" alt="">  
            <h4>我是商品图片的标题</h4>
            <p>我是商品图片的描述</p> 
        </a>
      </li>
      <li>
        <a href="">    
            <img src="./uploads/clothes_goods_6.jpg" alt="">     
            <h4>我是商品图片的标题</h4>
            <p>我是商品图片的描述</p>   
        </a>
      </li>
      <li>
        <a href="">     
            <img src="./uploads/clothes_goods_7.jpg" alt="">   
            <h4>我是商品图片的标题</h4>
            <p>我是商品图片的描述</p>     
        </a>
      </li>
      <li>
        <a href="">   
            <img src="./uploads/clothes_goods_8.jpg" alt="">
            <h4>我是商品图片的标题</h4>
            <p>我是商品图片的描述</p> 
        </a>
      </li>    
      <!-- 准备前四个相同的li，用于备用造成视觉差，填补轮播的空隙 -->
      <li>
        <a href="">      
            <img src="./uploads/clothes_goods_1.jpg" alt="">      
            <h4>我是商品图片的标题</h4>
            <p>我是商品图片的描述</p>   
        </a>
      </li>
      <li>
        <a href="">        
            <img src="./uploads/clothes_goods_2.jpg" alt="">             
            <h4>我是商品图片的标题</h4>
            <p>我是商品图片的描述</p>      
        </a>
      </li>
      <li>
        <a href="">         
            <img src="./uploads/clothes_goods_3.jpg" alt="">
            <h4>我是商品图片的标题</h4>
            <p>我是商品图片的描述</p>
        </a>
      </li>
      <li>
        <a href="">
            <img src="./uploads/clothes_goods_4.jpg" alt="">
            <h4>我是商品图片的标题</h4>
            <p>我是商品图片的描述</p>
        </a>
      </li>
    </ul>
  </div>
</body>
</html>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
li{
  list-style: none;
}

a{
  text-decoration: none;
}

.lunbo{
  /* 设置图片溢出隐藏 */
  overflow: hidden;
  width: 800px;
  height: 300px;
  border: 2px solid #000;
  margin: 200px auto;
}

.lunbo ul{
  display: flex;
  width: 2400px;
  height: 100%;
  border: 2px solid red;
  /* 注意是给ul设置动画，让整个模块跟着一起动 */
  animation: left_move 3s linear infinite;
  /* 让动画的状态为播放状态 不设置也行，因为是默认状态 */
  animation-play-state: running;
}
.lunbo ul:hover{
  /* 让鼠标悬停时动画暂停 */
  animation-play-state: paused;
}
.lunbo ul li{
  /* 让li变为弹性布局 */
  display: flex;
  /* flex-shrink默认值是1，即子元素的大小（数量）超过父盒子的宽高时，会自动缩小子元素的宽高。设置成0，就是不缩小，保持子元素的宽度。 */
  flex-shrink: 1;
  /* 主轴上的水平居中 */
  justify-content: center;
  /* 主轴上的垂直居中 */
  align-items: center;
  width: 200px;
  height: 100%;
  border: 1px solid skyblue;
}
.lunbo ul li:hover{
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}
.lunbo ul li img{
  width: 150px;
  height: 200px;
}

@keyframes left_move {
  to{
    /* 这里偏移的应该是8个盒子的长度，留下四个相同的盒子补上空缺造成视觉差 */
    transform: translateX(-1600px);
  }
}