一个很小的jQuery视差旋转木马脚本，它将HTML列表转换为旋转木马滑块，在幻灯片转换过程中对背景图像产生视差效果

如何使用它:

1.为视差转盘创建一个HTML无序列表，并将背景图像作为“层”添加到每个列表项中，如下所示：

<div id="parallax">
  <ul>
    <li>
      <div class="parallax-item bg1" data-move="15"></div>
      <div class="parallax-item bg2" data-move="35"></div>
      <div class="parallax-item bg3" data-move="50"></div>
    </li>
    <li>
      <div class="parallax-item bg4" data-move="15"></div>
      <div class="parallax-item bg5" data-move="35"></div>
      <div class="parallax-item bg6" data-move="50"></div>
    </li>
    <li>
      <div class="parallax-item bg7" data-move="15"></div>
      <div class="parallax-item bg8" data-move="35"></div>
      <div class="parallax-item bg9" data-move="50"></div>
    </li>
    ... more slides here ...
  </ul>
</div>

<!-- Navigation Buttons -->
<button disabled="true" id="prevParallax">Prev</button>
<button id="nextParallax">Next</button>

2.将必要的JavaScript和CSS文件添加到页面中。

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

3.覆盖默认背景图像。

.bg1{
  background-image: url(bg-1.png)
}
 
.bg2{
  background-image: url(bg-2.png)
}
 
.bg3{
  background-image: url(bg-3.png)
}
 
/* ... */

预览截图

背景图像视差效果 最小旋转木马