利用HTML+CSS实现轮播图效果

步骤：

HTML部分

首先准备四张图片用来做轮播图的滚动图片。

利用两个div标签，将第一个div设置class属性为father作为父级盒子，第二个div嵌套到该父级盒子中，并设置class属性为son。

然后将四张图片通过img标签放到子级div中。

注：此处在四张图片全部添加到子级盒子中时，再将第一张图片添加一份放在最后面，作用是：用于轮播图在滚动完四张图片后，平滑的切换到下一次循环滚动。

代码

  <div class="father">
        <div class="son">
            <img src="../image/1.jpg" alt="">
            <img src="../image/2.jpg" alt="">
            <img src="../image/3.jpg" alt="">
            <img src="../image/4.jpg" alt="">
            <img src="../image/1.jpg" alt="">
        </div>
    </div>

CSS部分

设置对应的CSS样式

/*定义轮播图实现效果的动画*/
/*lunbo:所定义动画名称*/
@keyframes lunbo {
     0%,
     20%{
          transform: translate(0px, 0px);
     }

     25% ,
     45%{
          transform: translate(-500px, 0px);
     }

     50% ,
     70%{
          transform: translate(-1000px, 0px);
     }

     75% ,
     95%{
         transform: translate(-1500px, 0px);
     }
            
     100% {
         transform: translate(-2000px, 0px);
     }
            
}

/*设置父级盒子宽度和高度，并设置在该div块中的内容超出宽高后自动隐藏*/
.father{
   width: 500px;
   height: 300px;
   overflow: hidden; 
}

/*设置子级盒子宽度，宽度为5个图片的总和*/
.son{
   width: 2500px;
}

/*设置图片宽高，以及将图片进行浮动，让图片之间紧贴着*/
img {
   width: 500px;
   height: 300px;
   float: left;
   /*
    使用上面定义的轮播图效果动画。
    值分别是：动画名称  动画执行实现  运动曲线(lineae:匀速)  infinite：循环滚动
   */
   animation: lunbo 10s linear  infinite ;
}

至此，一个简易的轮播图就完成啦。