最近自己手写了一个轮播图,是这样的,页面上显示两张图片,每次点击滚动一张。如下图
相信大家大部分人是找的插件,毕竟自己写费事又费力。但是这次我想试试自己看看能不能写出来,所以就纯手写了代码!首先看逻辑图:
手机拍摄的,大家凑合着看。要实现无缝轮播,其实是有一个障眼法的。就是当我们移动到最左边的时候,也就是显示的是第四张和第一张的时候,我们再次点击上一张,利用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和图片