serialshuffle是一个很小的jQuery插件，它可以在网格中随机打乱图像，并具有淡入/淡出动画效果。

它支持任意数量的列（6、9、12等），使其成为为客户显示品牌标志或图像密集型模型的有趣方式。

有助于为您的网页设计演示增添一点额外的活力，或者以独特的方式简单地展示您的作品！

如何使用它:

1.将jQuery库与serialshuffle插件的文件一起添加到页面中。

<link rel="stylesheet" href="/path/to/dist/jquery.serialshuffle.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.serialshuffle.min.js"></script>

2.在页面上创建徽标列表。

<ul class="js-serialshuffle">
  <li><img src="1.svg" alt=""></li>
  <li><img src="2.svg" alt=""></li>
  <li><img src="3.svg" alt=""></li>
  <li><img src="4.svg" alt=""></li>
  <li><img src="5.svg" alt=""></li>
  ... more logo here ...
</ul>

3.初始化插件并从您指定的文件夹中加载更多徽标。

$('.js-serialshuffle').serialshuffle({
  folder: './logos/',
  shuffle: [
    '6.svg',
    '7.svg',
    '8.svg',
    '9.svg',
    '10.svg',
    // ... more logos here ...
  ]
});

4.设置两个图像的淡入淡出延迟。默认值：2000毫秒。

$('.js-serialshuffle').serialshuffle({
  folder: './logos/',
  shuffle: [
    '6.svg',
    '7.svg',
    '8.svg',
    '9.svg',
    '10.svg',
    // ... more logos here ...
  ],
  speed: 1000,
});

预览截图

淡入淡出动画打乱图像 jQuery serialshuffle