[分享]css两个图片轮播代码

CSS是前端开发中很重要的一环，其中图片轮播也是很常见的功能。接下来将介绍两个使用CSS实现图片轮播的代码。//第一种轮播代码 .slider { width: 300px; height: 200p...

CSS是前端开发中很重要的一环，其中图片轮播也是很常见的功能。接下来将介绍两个使用CSS实现图片轮播的代码。

//第一种轮播代码
.slider {
  width: 300px; 
  height: 200px; 
  overflow: hidden; 
}
.slider img {
  width: 300px; 
  height: 200px; 
  float: left; 
}
.slider-inner {
  position: relative; 
  width: 600px; 
  height: 200px; 
  animation: change 4s infinite; 
}
.slider-inner img {
  float: left; 
}

@keyframes change {
  0% {
    left: 0px;
  }
  25%{
    left: -300px;
  }
  50% {
    left: -300px;
  }
  75%{
    left: -600px;
  }
  100% {
    left: -600px;
  }
}

//第二种轮播代码
.slider {
  width: 300px; 
  height: 200px; 
  overflow: hidden; 
  position: relative; 
}
.slider img {
  width: 300px; 
  height: 200px; 
  position: absolute; 
  left: 0; 
  transition: opacity 1s ease-in; 
}
.slider img:nth-child(2) {
  opacity: 0; 
}
.slider:hover img:nth-child(2) {
  opacity: 1; 
  z-index: 1; 
} 

第一种代码中，通过设置外层盒子的宽度和高度，以及overflow:hidden属性实现图片的裁剪。通过使用float: left属性，让所有图片都排列在一行，然后利用CSS3的animation属性实现轮播效果。

第二种代码中，通过设置图片的position为absolute，让所有图片都重叠起来，然后通过将第一张和第二张图片设置不同的opacity值，实现鼠标悬停时的轮播效果。