使用CSS3实现照片左右飞入滑出切换

要使用CSS3实现照片左右飞入滑出的切换效果，你可以利用CSS的transform和transition属性。下面是一个简单的示例，展示了如何实现这种效果：

1. HTML结构：

首先，你需要一个包含照片的HTML结构。这里，我们使用div元素来代表照片，并给它们添加类名以便于CSS样式化。

<div class="photo-container">
  <div class="photo active" style="background-image: url('photo1.jpg');"></div>
  <div class="photo" style="background-image: url('photo2.jpg');"></div>
  <div class="photo" style="background-image: url('photo3.jpg');"></div>
  <!-- 更多照片 -->
</div>

在这个例子中，我们使用了内联样式来设置照片的背景图像。你也可以选择将样式放在CSS文件中，并通过类名来应用它们。

2. CSS样式：

接下来，你需要为照片和容器添加CSS样式。这里的关键是使用transform来实现照片的左右移动，以及transition来创建平滑的过渡效果。

.photo-container {
  position: relative;
  width: 100%; /* 或你想要的宽度 */
  height: 500px; /* 或你想要的高度 */
  overflow: hidden; /* 隐藏超出容器的部分 */
}

.photo {
  position: absolute;
  top: 0;
  left: 100%; /* 初始位置在容器外部 */
  width: 100%; /* 与容器宽度相同 */
  height: 100%; /* 与容器高度相同 */
  background-size: cover; /* 确保照片覆盖整个元素 */
  background-position: center; /* 照片居中显示 */
  transition: transform 1s ease-in-out; /* 平滑过渡效果 */
  opacity: 0; /* 初始状态为透明 */
}

.photo.active {
  transform: translateX(0); /* 活动照片移动到可见位置 */
  opacity: 1; /* 活动照片为可见 */
}

3. JavaScript逻辑（可选）：

如果你想要自动切换照片，或者通过用户交互来切换，你可能需要添加一些JavaScript逻辑。下面是一个简单的示例，展示了如何使用JavaScript来自动切换照片：

const photos = document.querySelectorAll('.photo');
let currentIndex = 0;
const numPhotos = photos.length;
const switchInterval = 3000; // 3秒切换一次

function switchPhoto() {
  // 移除当前活动照片的类名
  photos[currentIndex].classList.remove('active');
  // 更新索引，实现循环切换
  currentIndex = (currentIndex + 1) % numPhotos;
  // 为下一张照片添加活动类名
  photos[currentIndex].classList.add('active');
}

// 设置定时器，自动切换照片
setInterval(switchPhoto, switchInterval);

这段代码会每3秒自动切换到下一张照片。你可以根据需要调整切换间隔或添加其他交互功能。