用flex布局实现图片轮播

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

话不多说，先看效果：

以下是实现步骤：

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

效果图：

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

 

效果图：

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

 

效果图： 

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

 

​​​​​​​ 效果图：

 最后附上代码： 

  
  
  
  
  



  

    

      
      

        
               
            
我是商品图片的标题
            
我是商品图片的描述
   
        
      
      

          
                
            
我是商品图片的标题
            
我是商品图片的描述
     
        
      
      

            
                
            
我是商品图片的标题
            
我是商品图片的描述
    
        
      
      

         
                
            
我是商品图片的标题
            
我是商品图片的描述
   
        
      
      

              
              
            
我是商品图片的标题
            
我是商品图片的描述
 
        
      
      

            
                 
            
我是商品图片的标题
            
我是商品图片的描述
   
        
      
      

             
               
            
我是商品图片的标题
            
我是商品图片的描述
     
        
      
      

           
            
            
我是商品图片的标题
            
我是商品图片的描述
 
        
      
    
      
      

              
                  
            
我是商品图片的标题
            
我是商品图片的描述
   
        
      
      

                
                         
            
我是商品图片的标题
            
我是商品图片的描述
      
        
      
      

                 
            
            
我是商品图片的标题
            
我是商品图片的描述
        
      
      

        
            
            
我是商品图片的标题
            
我是商品图片的描述
        
      
    
  

*{
  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);
  }
}