css怎么做图片切换

在网页设计中，图片切换效果是我们常常需要实现的一个功能之一。在前端开发中，可以通过CSS来制作图片切换效果。

//HTML代码div class="img-wrapper">
      img src="./img/1.jpg" alt="Image 1">
      img src="./img/2.jpg" alt="Image 2">
      img src="./img/3.jpg" alt="Image 3">
    /div>
//CSS代码.img-wrapper{
      width: 500px;
      height: 300px;
      overflow: hidden;
      position: relative;
}
.img-wrapper img{
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.5s ease-in-out;
}
.img-wrapper img:nth-child(1){
      z-index: 3;
}
.img-wrapper img:nth-child(2){
      z-index: 2;
}
.img-wrapper img:nth-child(3){
      z-index: 1;
}
.img-wrapper img:last-of-type{
      z-index: 4;
}
.img-wrapper:hover img:nth-child(3){
      transform: translateX(-100%);
}
.img-wrapper:hover img:nth-child(2){
      transform: translateX(-100%);
      z-index: 3;
}
.img-wrapper:hover img:last-of-type{
      transform: translateX(0%);
      z-index: 2;
}
    

以上代码实现了鼠标悬停时图片向左侧滑动，同时第三张图片变为第一张图片，第二张图片变为第三张图片，最后一张图片变为第二张图片的图片切换效果。

在CSS中，我们通过将三张图片的标签用绝对定位控制其叠放顺序，同时根据它们在HTML文档中的顺序分别给它们不同的z-index值。hover伪类指定了鼠标悬停时图片的变换效果，从而实现了图片切换的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！