jQuery图片滚动图片的效果

当移动的最后一屏移动的个数小于要展示的个数的时候 只移动(展示个数最后一屏的个数的)差值 举个例子 每一屏都要展示个但总个数才个滚动到下一屏时候用户看到的还是个这个时候需要移动的是三个

这个效果是基于jQuery写的只是想纪念下自己的学习 话不多说了贴代码代码如下:(function( $ ){var slider = function( elem args ){thisconfig = $extend({effect : x //效果 水平 xspeed : //动画速度trigger : mouseenter //触发事件callback : null // 回调函数view : } args || {} );thishistory = [];//记录移动的历史记录thisindex = ;thisel = elem;thislength = thiselfind(li)length;//记录总长度thiswidth = thiselfind(li)eq()outerWidth();//记录每一个单项的宽度thisinit();}sliderprototype = {constructor : sliderinit : function(){thisbindEvents();}bindEvents : function(){thisprev();thisnext();}prev : function(){thiselfind([datatype="left"])click( $proxy(function(){if( !thishistorylength ) return;//如果记录为空证明没有进行移动过所以直接returnthisindex;var step = thishistorypop();//取最后的移动步骤var move = step * thiswidth;//算出移动宽度thiselfind("ul")animate( { "left" : "+="+move+"px" } thisconfigspeed )} this));}next : function(){thiselfind([datatype="right"])click( $proxy(function(){//如果是当前的最后一页直接returnif(thisindex == parseInt( thislength / thisconfigview ) ){return;}thisindex++;//这个计算很重要//计算 ( 下一页 * view ) 展示个数是否大于总长度 : 好比当前在第一页 (+) * > (总长度)//则thisstep 赋值为取余 也就是剩下要移动的个数if( thisconfigview * (thisindex+) > thislength ){thisstep = thislength%thisconfigview;}else{//否则移动展示的个数thisstep = thisconfigview;}//记录移动的历史记录thishistorypush(thisstep);var move = * thisstep * thiswidth;thiselfind("ul")animate( { "left" : "+="+move+"px" } thisconfigspeed )} this));}}$fnslider = function( args ){return thiseach(function(){var el = this;var plugins = new slider( $( el ) args );$(el)data("slider" plugins );});}})(jQuery)开始对这个实现没有好的想法本来想利用一个变量记录当前的移动个数的但是后面突然想到用数组来做这样子的处理顿时感觉清晰了这个的实现重点是一个记录移动步骤的数组向左移动的时候往数组里面push移动的步骤向右移动的时候从数组里面取最后一项 []pop()这样子很好的实现了需求做的比较粗糙麻烦各位大神提点意见