Effects of jQuery image scrolling (alternative implementation) _ jquery

JQuery image scrolling effect (alternative implementation). For more information, see the requirement. Blank items are not allowed on the next screen during image switching. In other words:

1. When the number of moves on the last screen is smaller than the number to be displayed, only the difference is moved (the number of displays-the number of the last screen. For example, each screen will display 7, but the total number is only 10. When you scroll to the next screen, you will still see 7, at this time, we need to move three

This effect is based on jQuery. I just want to remember that I don't have to talk much about it, so I am posting code.

The Code is as follows:

(Function ($ ){
Var slider = function (elem, args ){
This. config = $. extend ({
Effect: 'X', // effect level-x
Speed: 600, // animation speed
Trigger: 'mouseenter', // trigger the event
Callback: null, // callback function
View: 7
}, Args || {});

This. history = []; // records the history of moving
This. index = 0;
This. el = elem;
This. length = this. el. find ('lil'). length; // The total length of the record.
This. width = this. el. find ('lil'). 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, it indicates that it has not been moved, so return directly

This. index --;
Var step = this. history. pop (); // obtain the last moving step.
Var move = step * this. width; // calculates the moving 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 current last page is displayed, return
If (this. index = parseInt (this. length/this. config. view, 10 )){
Return;
}
This. index ++;
// This computation is very important
// Check whether the number of views displayed on the next page is greater than the total length. For example, the number of views displayed on the first page (1 + 1) x 7> 12 (total length)
// The value of this. step is the remainder, that is, the number of remaining parts to be moved.
If (this. config. view * (this. index + 1)> this. length ){
This. step = this. length % this. config. view;
} Else {
// Otherwise, move the display count
This. step = this. config. view;
}
// Record the history of moving
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 plugins = new slider ($ (el), args );
$ (El). data ("slider", plugins );
});
}
}) (JQuery)

I didn't have a good idea about this implementation. I wanted to use a variable to record the current number of moves, but then I suddenly thought of using Arrays for such processing, and I suddenly felt clear.

This implementation focuses on an array that records the moving steps. When moving to the left, push to the array. when moving to the right, retrieve the last []. pop () from the array ().

This is a good way to achieve the demand and make it rough. Please give me some comments.