具体问题是这样的，我想要一个能无限循环播放图片的轮播，重点是播放完一轮后，跳回第一张时，切换效果应该和之前一样。即如果动画是从左到右切换的，那么最后一张切换到第一张时，也应该是这个效果。
在网上找了很多 jQuery 的轮播插件，但都不能满足我所想要的效果。Bootstrap 的 Carousel 倒是能用，但源码看不懂。
HTML 代码大致如下：
<p class="carousel">
<p class="slide"></p>
<p class="slide"></p>
<p class="slide"></p>
<p class="slide"></p>
</p>
CSS 关键代码：
.carousel {
height: 120px;
overflow: hidden;
}
.slide {
height: 120px;
transition: all .4s ease-in;
}
jQuery关键代码：
$('.slide').each(function(){
$(this).css('transform', 'translateY(' + (i)*-100 + '%)');
})
我所写的这个，最后一张是transform: translateY(-300%);，然后就变成了transform: translateY(0%);,所以动画的方向变反了。
这样的写法似乎无法解决这个问题，是否有其他的轮播图写法？
我建议你用JQERY的通用JS来改。轮播还需要CSS来配合才可以完成。而且你的.SLIDE只有一个PIC就乱了。要分开PIC来加CSS，不要全加上云。PIC用每个图一个CSS子样式就可。
这个思路是:
这样就可以让轮播始终都是一个图片的距离，无论你点击哪个序号（1,2,3,4,5），比如，从当前是第一张轮播，你直接跳到第五张图片，普通轮播会产生4个图片的距离，但是这样始终是一个图片的距离。
其他在尾部克隆插入的方法没法解决以上产生的距离问题。
参考我写的组件：https://github.com/xiaomingming/easySwitch。
demo是
easySwitch.html.三个class，都加absoulte,transition
左：transformX(-100%)
中：transformX(0)
右：tranformX(100%)
每次把当前显示的加为中间的class 小于当前的加左边class，大于的放右边，当最后一个激活的时候，把第一个放右边。只要每次改当前索引值就可以了，动画交给tansition去
原始html：
先clone slide1 和 slide3，然后变成这样：
当动ul翻到最后clone出的slide1后，直接让ul定位到原始的slide1（这个动作不要加动画效果，直接定位），反方向也是如此。
移动端就不是这么做了。每个slide都加absoulte,transition属性，然后监听手势去控制当前触摸的slide和其前后slide的transform。
这个思路说白了其实很简单，比如你要轮播三张图，你可以写四个标签，第一张图和第四张图是一样的，当播完第四张的时候将标签改为第一张的标签。。。手机码字不方便，大概就这个意思，达到欺骗用户眼睛的目的，大部分轮播插件也是这么实现的
给个思路，第一个内容
position: relative。然后轮播到最后一个内容的时候，第一个内容添加left值，大小为滚滚容器的宽度减一块内容的宽度。然后接着轮播，就看到了我们相对定位的第一个内容后。把第一个内容的position: static。然后滚动的容器left: 0就做到无缝了。思路大概是这样了！
有个视频可以做参考：华为轮播图
我觉得 没必要闭门造车。可以看看这个 superslide 一个我用了很多年的插件
源码也比较简单，可以看得懂 。
考虑一下使用Canvas自己画~~？
我觉得用Canvas画反而比较简单方便。而且性能还能好点……
如果要实现这种无缝滚动，需要你补齐你的p.slider。实现这样效果的插件很多，比如楼上说的superslider，还有cxScroll等，如果楼主想看具体的细节，花点时间去研究下这些插件的源码即可，原理很简单。
我想你要的是：当最后一张图片时就轮播到第一张是吗？ 无限轮播是吧？..
这个容易只要一个公式就搞定了.
var prevImg = (currentImg+1)%totalImg; //currentImg是当前的轮播图片，toutalImg是一共多少图片.
这样就能无限了