[分享]css3图片切换怎么调位置

 今天我们来看一下如何在CSS3中实现图片切换，并且可以调整它们的位置。 首先，让我们创建一个简单的HTML代码，其中包含三个图片和两个按钮： Previous Next 现在，我们需要...

 今天我们来看一下如何在CSS3中实现图片切换，并且可以调整它们的位置。
首先，让我们创建一个简单的HTML代码，其中包含三个图片和两个按钮：

 <div class="container">
    <img src="image1.jpg" alt="Image 1" />
    <img src="image2.jpg" alt="Image 2" />
    <img src="image3.jpg" alt="Image 3" />
<br>
    <button class="prev">Previous</button>
    <button class="next">Next</button>
  </div> 

现在，我们需要写一些CSS代码来使图片和按钮的位置布局正确。我们将使用CSS3中的flexbox来管理这些元素的位置。以下是样式代码：

 .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
<br>
  img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
  }
<br>
  .prev,
  .next {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
  }
<br>
  .prev {
    order: 1;
  }
<br>
  .next {
    order: 3;
  } 

通过使用flexbox，我们使图片和按钮并排排列，并且通过“justify-content：space-between”属性使它们具有一定间隔。
现在，我们需要一些JavaScript代码来触发图片切换。以下是代码：

 const images = document.querySelectorAll("img");
  const prevBtn = document.querySelector(".prev");
  const nextBtn = document.querySelector(".next");
<br>
  let counter = 0;
<br>
  function showImage(n) {
    images.forEach(img => img.classList.remove("show"));
    images[n].classList.add("show");
  }
<br>
  function prevImage() {
    counter--;
    if (counter < 0) {
      counter = images.length - 1;
    }
    showImage(counter);
  }
<br>
  function nextImage() {
    counter++;
    if (counter >= images.length) {
      counter = 0;
    }
    showImage(counter);
  }
<br>
  prevBtn.addEventListener("click", prevImage);
  nextBtn.addEventListener("click", nextImage);
<br>
  showImage(counter); 

我们首先使用querySelectorAll（“img”）选择所有图片。然后我们选择了前一个和下一个按钮。我们创建了一个计数器，它将存储当前显示的图片的索引。
我们添加了“show”类来显示图像。在showImage（）函数中，我们遍历所有图像，将它们的“show”类删除，并将“show”类添加到要显示的图像。
在prevImage和nextImage函数中，我们递增或递减计数器，以更改要显示的图像。如果计数器超过图像数量或小于零，它将被重置。
最后，我们将click事件添加到前一个和下一个按钮，当它们被单击时，分别调用prevImage和nextImage函数。 showImage（counter）将显示第一张图片。
现在，图片切换完成并且位置正确。我们可以通过调整CSS样式来自由调整图像和按钮的位置。