css两个图片轮播代码

CSS中实现图片轮播的常见方法有两种，分别是使用CSS动画和使用JavaScript。

第一种方法是使用CSS动画实现图片轮播。我们需要给图片容器设置一个固定的宽度和高度，以及设置overflow属性为hidden，这样可以保证图片在容器内部显示。然后，我们可以使用CSS的@keyframes规则来定义一个动画序列，通过改变图片容器的left属性值来实现图片的切换效果。具体的代码如下所示：

<div class="bee8-321e-378d-d0df slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

.slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: slide 10s infinite;
}
@keyframes slide {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  53.33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

上述代码中，我们给图片容器.slider设置了宽度为600px，高度为400px，并将overflow属性设置为hidden，以便将图片限制在容器内部显示。然后，我们给每张图片设置了绝对定位，宽度和高度为100%，并将其初始opacity属性设置为0，以隐藏图片。接下来，我们使用@keyframes规则定义了一个名为slide的动画序列，通过改变图片的opacity属性值来实现图片的轮播效果。在这个动画序列中，我们将图片的opacity属性值在不同的百分比位置进行了调整，从而实现了图片的渐显和渐隐效果。

第二种方法是使用JavaScript实现图片轮播。我们需要在页面中引入一个JavaScript库（如jQuery），然后通过编写JavaScript代码来实现图片轮播的逻辑。具体的代码如下所示：

<div class="d0df-109a-b362-bc19 slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

.slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.slider img.active {
  opacity: 1;
}

$(document).ready(function() {
  var images = $('.slider img');
  var currentIndex = 0;
  function showImage(index) {
    images.removeClass('active');
    images.eq(index).addClass('active');
  }
  function nextImage() {
    currentIndex++;
    if (currentIndex >= images.length) {
      currentIndex = 0;
    }
    showImage(currentIndex);
  }
  setInterval(nextImage, 5000);
});

在上述代码中，我们给图片容器.slider设置了宽度为600px，高度为400px，并将overflow属性设置为hidden，以便将图片限制在容器内部显示。然后，我们给每张图片设置了绝对定位，宽度和高度为100%，并将其初始opacity属性设置为0，以隐藏图片。在JavaScript代码中，我们首先使用jQuery选择器获取到所有的图片元素，并将其存储在一个变量中。然后，我们定义了两个函数，一个是showImage函数用于显示指定索引位置的图片，另一个是nextImage函数用于切换到下一张图片。在nextImage函数中，我们首先将currentIndex加1，然后判断currentIndex是否超过了图片的总数，如果超过了，则将currentIndex重置为0，从而实现循环播放的效果。我们使用setInterval函数每隔5秒钟调用一次nextImage函数，从而实现图片的自动轮播。

以上就是使用CSS动画和JavaScript实现图片轮播的两种常见方法。通过这两种方法，我们可以轻松地实现网页中的图片轮播效果，为用户带来更好的浏览体验。