1, when the last screen moved is less than the number to display, only move (show number-the number of the last screen) difference. For example: Each screen to show 7, but the total number is only 10, scrolling to the next screen when the user sees or 7, this time need to move three
This effect is based on jquery, just want to commemorate their learning words do not say more, paste code code as follows: (function ($) {var slider = function (Elem, args) {thi S.config = $.extend ({effect: ' x ',//effect level-X speed:600,//animation speed trigger: ' MouseEnter ',//Trigger event Callback:null,//back Tune function view:7 }, args | | {} ); This.history = [];//record moving historical record this.index = 0; This.el = Elem; This.length = this.el.find (' li '). length;//record total length this.width = this.el.find (' li '). EQ (0). Outerwidth ()//record the width of each individual item This.init (); } Slider.prototype = {constructor:slider, init:function () {this.bindevents ();}, Bindevents:function () {This.prev () ; This.next (); }, Prev:function () {this.el.find (' [data-type= left '] '). Click ($.proxy (function () { if (!this.history.length) return;//If the record is empty, the proof has not been moved, so direct return this.index--; var step = This.history.pop ();//Take the last move steps var moves = this.width;//The move width this.el.find ("ul"). Animate ({"Left": "+ =" +move+ "px"}, This.config.speed) }, this); }, Next:function () {This.el.find ("[Data-type= "Right"]. Click ($.proxy (function () {//If the last page is current, direct return if (This.index = = parseint (This.length/ This.config.view) {return;} this.index++; This calculation is very important.//calculation (Next page * view) shows whether the number is greater than the total length: like the current on the first page (1+1) *7 > 12 (total length)//Then This.step assignment is the remainder, that is, the remaining number to move if (this.config . View * (this.index+1) > this.length) {this.step = This.length%this.config.view;} else{//Otherwise the number of mobile display this.step = This.config.view;//Record Mobile History This.history.push (THIS.STEP); var move =-1 * this.step * this.width; this.el.find ("ul"). Animate ({"Left": "+ =" +move+ "px"}, This.config.speed }, this); }} $.fn.slider = function (args) {return This.each (function () {var el = this; var plug INS = new Slider ($ (EL), args); $ (EL). Data ("Slider", plugins); }); (jQuery) began to have no good idea of this implementation, would like to use a variable to record the current number of moves, but suddenly thought of using an array to do such a deal, suddenly feel clear. This implementation is focused on a record of moving steps in an array. When moving to the left, push the move in the array and move to the right, taking the last item from the array [].pop (). This looks very good to achieve the demand, do more rough, trouble you big God to make some comments