使用html+css+jquery实现3D轮播图

还是先来看看效果图：

 通过效果图我们先理一下思路：

首先就是需要几张图片，但只有一张是显示在我们眼前的

第二步：把一张图片分成几等份，这样点击转换的时候就会分开转

第三步：就是实现点击按钮切换下一张。

HTML部分

HTML部分首先我们需要一个盒子显示图片，然后在盒子里装入图片，你想装几张图片就可以写几个li,除了图片我们还需要一个按钮来点击。

一个li的图片效果如图所示：

div是当你点击下一张的时候一个div代表li里的一张图片

 代码如下：

CSS部分

css部分就是设置样式了，首先就是先给盒子一个宽高，盒子是装显示一张图片的，接下来就是li了，给li设置绝对定位，不然图片不会对齐的。

Jquery部分

这里需要注意的是，如果你不设置一个开过和定时器，当你点击下一张时点击一次没问题，但是连续点击就会出现一点bug，所以我加了一个开关思想，只有一张图片完整的呈现在眼前后，下一张图片才能出来。

整体代码

这样写的话我们会发现其实有的数据都是固定的，想要改的话很麻烦，下面这种方法是使用jquery渲染的方式现实，这样改数据就很简单了，并且代码量也少一点。

     就是把数据通过渲染的方式写出来，而且这种方法也更方便，比如把count改成40，就会一张图片分成40等份，切换下一张图片的时候就会40个切换，而不是四个了。

代码如下：