纯CSS实现的无侵入的卡盘（幻灯片）

让我为您详细讲解纯CSS实现的无侵入的卡盘（幻灯片）的完整攻略。

什么是纯CSS实现的无侵入的卡盘（幻灯片）？

卡盘，又称幻灯片，是一种常见的展示图片或文章的方式。在网页设计中，实现一款简单易用的卡盘，对于提升用户体验和页面效果很有帮助。使用CSS技术可以实现轻松美观的卡盘效果，而不用繁琐地调用JS等其他技术。

实现无侵入的卡盘步骤

以下是实现无侵入的卡盘的详细步骤：

1. 准备HTML代码

在HTML中创建一个包含图片的div或其他块级元素，每个div中包含一张图片。通常，我们会给这些图片设置相同的类，以便在CSS样式中进行选择。例如：

<div class="slider">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
  <img src="image4.jpg" alt="">
  <img src="image5.jpg" alt="">
</div>

2. 添加样式

为了实现卡盘效果，需要使用CSS样式。在这里，我们使用CSS中的position、overflow、width等属性。这里需要注意的是，所有的图片position属性应该是absolute或者fixed，这样我们才能在后面使用CSS来进行操作。具体样式如下：

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  width: 100%;
  height: auto;
}

.slider img:first-child {
  position: relative;
  opacity: 1;
}

解释一下上述CSS样式：

slider：使用relative定位包含图片的div，使其能够正常显示图片的内容。
.slider img：选择卡盘中所有的图片，给它们一个绝对定位，并利用opacity将其透明度设置为0，达到隐藏的作用。同时，利用transition来实现过渡效果。
slider img:first-child：通过CSS的选择器找到第一张图片，并设置其为相对定位并将opacity设置为1，从而显示第一张图片。

3. 实现轮播效果

在上一步中，我们已经把所有的图片都设为了透明的。现在，我们需要实现轮播效果。我们可以创建一个类名为.active的类，单独选择当前需要显示的图片，将其透明度设置为1，并用transition声明动画过渡。

.slider img.active {
  opacity: 1;
}

接下来，我们给轮播图片添加JS，使用addEventListener添加transitionend监听器，当过渡效果结束后，自动切换显示下一张图片。这里是一个示例JS代码：

// 获得轮播图片的div
const slider = document.querySelector('.slider');
// 获得所有的轮播图片
const images = slider.querySelectorAll('img');
// 定义轮播图片数量
const len = images.length;
// 定义当前显示图片的索引
let index = 0;

// 设置自动切换图片时间间隔
let timer = setInterval(() => {
  // 让当前图片淡出
  images[index].classList.remove('active');
  // 如果播放到最后一张，则从头开始播放
  index = (index + 1) % len;
  // 让下一张图片淡入
  images[index].classList.add('active');
}, 3000);

// 监听图片动画结束事件
slider.addEventListener('transitionend', () => {
  // 如果图片过渡效果结束时显示的不是当前图片，则隐藏该图片
  if (!images[index].classList.contains('active')) {
    images[index].style.opacity = 0;
  }
  // 如果图片过渡效果结束时显示的是下一张图片，则取消过渡效果，显示图片
  if (images[index].style.opacity === '1') {
    images[index].classList.add('active');
    images[index].style.transition = '';
  }
});

4. 示例

这里提供两个示例，一个是垂直滚动的卡盘，另一个是横向滚动的卡盘。具体代码如下：

垂直滚动的卡盘

HTML代码：

<div class="slider-vertical">
  <img src="/image1.jpg" alt="">
  <img src="/image2.jpg" alt="">
  <img src="/image3.jpg" alt="">
</div>

CSS代码：

.slider-vertical {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}

.slider-vertical img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  width: 100%;
}

.slider-vertical img:first-child {
  position: relative;
  opacity: 1;
}

.slider-vertical img.active {
  opacity: 1;
  transform: translate(0, 0);
}

JS代码：

const sliderVertical = document.querySelector('.slider-vertical');
const imagesVertical = sliderVertical.querySelectorAll('img');
const lenVertical = imagesVertical.length;
let indexVertical = 0;
let timerVertical = setInterval(() => {
  imagesVertical[indexVertical].classList.remove('active');
  indexVertical = (indexVertical + 1) % lenVertical;
  imagesVertical[indexVertical].classList.add('active');
}, 3000);
sliderVertical.addEventListener('transitionend', () => {
  if (!imagesVertical[indexVertical].classList.contains('active')) {
    imagesVertical[indexVertical].style.opacity = 0;
    imagesVertical[indexVertical].style.transform = 'translate(0, -100%)';
  }
  if (imagesVertical[indexVertical].style.opacity === '1') {
    imagesVertical[indexVertical].classList.add('active');
    imagesVertical[indexVertical].style.transition = '';
    imagesVertical[indexVertical].style.transform = '';
  }
});

横向滚动的卡盘