轮播图--纯手写！

最近自己手写了一个轮播图，是这样的，页面上显示两张图片，每次点击滚动一张。如下图

相信大家大部分人是找的插件，毕竟自己写费事又费力。但是这次我想试试自己看看能不能写出来，所以就纯手写了代码！首先看逻辑图：

手机拍摄的，大家凑合着看。要实现无缝轮播，其实是有一个障眼法的。就是当我们移动到最左边的时候，也就是显示的是第四张和第一张的时候，我们再次点击上一张，利用css直接把图片移动到了右侧的位置，然后用户只看到了第四张和第三张的出现，这样就实现了无缝的轮播。废话不多说，布局方式贼简单，直接看js：

var i=2;
var big_i=$('#center ul li').length;
var firstli = $('#center ul li').eq(0).clone();
firstli.appendTo($('#center ul'));
var secoundli = $('#center ul li').eq(1).clone();
secoundli.appendTo($('#center ul'));
var lastli = $('#center ul li').eq(big_i-1).clone();
$('#center ul li').eq(0).before(lastli);
var lastli2 = $('#center ul li').eq(big_i-1).clone();
$('#center ul li').eq(0).before(lastli2);
$("p").eq(0).click(function(){
    //上一张
    per();
})
$("p").eq(1).click(function(){
    //下一张
    next();
})

function per(){
    i--;
    console.log("运动完成后"+i);
    if(i==-1){
        $('#center ul').css('left',-2080)
        i=3;
    }
    $("#center ul").stop(true).animate({
        'left':-i*520
    },800);
}
function next(){
    i++;
    console.log("运动完成后"+i);
    if(i==(big_i+3)){
        $('#center ul').css('left',-1040)
        i=3;
    }
    $("#center ul").stop(true).animate({
        'left':-i*520
    },800);
    
}

这里把图片排列成3->4->1->2->3->4->1->2,红色部分是原来html中排列的，剩下的四张是利用js添加进去的。

这里有百度网盘的链接，点这里，密码：fg5v。包括所有的css，html，js和图片