写一个图片洗牌式旋转切换特效代码

以下是一个简单的图片洗牌式旋转切换特效的示例代码：

HTML:

<div class="image-shuffle">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  <img src="image4.jpg">
</div>

CSS:

.image-shuffle {
  position: relative;
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.image-shuffle img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: transform 1s, opacity 1s;
}

.image-shuffle img.active {
  opacity: 1;
  transform: rotateY(0deg);
}

.image-shuffle img.left {
  transform: rotateY(-90deg);
}

.image-shuffle img.right {
  transform: rotateY(90deg);
}

JavaScript:

var images = document.querySelectorAll('.image-shuffle img');
var currentImage = 0;

function shuffleImages() {
  images[currentImage].classList.remove('active');

  var random = Math.floor(Math.random() * images.length);
  while (random === currentImage) {
    random = Math.floor(Math.random() * images.length);
  }

  var direction = (Math.random() < 0.5) ? 'left' : 'right';
  images[random].classList.add('active', direction);

  currentImage = random;
}

setInterval(shuffleImages, 3000);

代码说明：

1. HTML 中包含一个 div 元素，其中包含多个 img 元素，每个 img 元素对应一张图片。
2. CSS 中设置 div 元素为相对定位，同时设置其宽度和高度为 500px，并且隐藏其溢出部分。设置 img 元素为绝对定位，同时设置其顶部和左侧位置为 0，宽度和高度为 100%，透明度为 0，以及过渡效果为 transform 和 opacity 都为 1s。同时，为 img 元素添加三个类名，分别为 active、left 和 right，用于控制图片的状态和旋转方向。
3. JavaScript 中首先获取所有 img 元素，并且记录当前显示的图片索引。然后定义一个函数 shuffleImages，该函数用于随机切换图片，并且随机选择旋转方向（左或右）。在函数内部，首先移除当前活动的图片的 active 类名，然后随机选择一个不同于当前图片的索引，并且添加 active 类名和旋转方向的类名。最后，将当前图片索引更新为随机选择的索引。最后使用 setInterval 函数每隔 3 秒钟调用一次 shuffleImages 函数，从而实现图片的自动切换。