我建议你用JQERY的通用JS来改。轮播还需要CSS来配合才可以完成。而且你的.SLIDE只有一个PIC就乱了。要分开PIC来加CSS，不要全加上云。PIC用每个图一个CSS子样式就可。

这个思路是:

1. 设置轮播的每个item为absolute，然后再通过z-index覆盖即可。active状态的z-index:2，normal状态为1。
2. 每次轮播left走一个图片的距离。

这样就可以让轮播始终都是一个图片的距离，无论你点击哪个序号（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：

<ul>
    <li class="slide1">1</p>
    <li class="slide2">2</p>
    <li class="slide3">3</p>
<ul>

先clone slide1 和 slide3，然后变成这样：

<p class="carousel">
    <ul>
        <li class="slide3">3</p>
        <li class="slide1">1</p>
        <li class="slide2">2</p>
        <li class="slide3">3</p>
        <li class="slide1">1</p>
    <ul>
</p>

当动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是一共多少图片.

这样就能无限了