轮播图--纯手写！

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

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

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

 1 var i=2;
 2 var big_i=$('#center ul li').length;
 3 var firstli = $('#center ul li').eq(0).clone();
 4 firstli.appendTo($('#center ul'));
 5 var secoundli = $('#center ul li').eq(1).clone();
 6 secoundli.appendTo($('#center ul'));
 7 var lastli = $('#center ul li').eq(big_i-1).clone();
 8 $('#center ul li').eq(0).before(lastli);
 9 var lastli2 = $('#center ul li').eq(big_i-1).clone();
10 $('#center ul li').eq(0).before(lastli2);
11 $("p").eq(0).click(function(){
12     //上一张
13     per();
14 })
15 $("p").eq(1).click(function(){
16     //下一张
17     next();
18 })
19 
20 function per(){
21     i--;
22     console.log("运动完成后"+i);
23     if(i==-1){
24         $('#center ul').css('left',-2080)
25         i=3;
26     }
27     $("#center ul").stop(true).animate({
28         'left':-i*520
29     },800);
30 }
31 function next(){
32     i++;
33     console.log("运动完成后"+i);
34     if(i==(big_i+3)){
35         $('#center ul').css('left',-1040)
36         i=3;
37     }
38     $("#center ul").stop(true).animate({
39         'left':-i*520
40     },800);
41     
42 }

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

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

轮播图--纯手写！

推荐阅读