The effect of jQuery picture scrolling picture (alternative implementation)_jquery

Requirement: When switching pictures, blank items are not allowed to appear on the next screen. In other words:

1. When the number of items moved on the last screen is less than the number to be displayed, only the difference (number of items displayed - number of items on the last screen) is moved. For example: Each screen must display 7 items, but the total number is only 10. When scrolling to the next screen, the user still sees 7 items. At this time, the three items that need to be moved are

This effect is written based on jQuery. I just want to commemorate my learning. Without further ado, I will post the code

Copy code The code is as follows:

(function( $ ){
var slider = function( elem , args ){
this.config = $.extend({
effect : 'x', //Effect level - x
: 600 , //Animation speed
trigger : 'mouseenter', //Trigger event
callback speed : null , // Callback function
view : 7
}, args | | {} );

this.history = [];//Record the history of moves
this.index = 0;
this.el = elem;
this.length = this.el.find('li').length;//The total length of the record
this.width = this.el.find('li').eq(0).outerWidth();//Record each The width of a single 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(){

                                                                                                                                                                    , proves that no movement has been performed, so directly return

this.index--;
var step = this.history.pop();//Get the last move step
var move = step * this.width;//Calculate the moving width
this.el.find("ul").animate( { "left" : " =" move "px" } , this.config.speed )

                     , this)); function(){
                                                                                                                                                                                                                                             
                                   
This.index ;
//This calculation is very important
//Calculate (next page* view) whether the number of displays is greater than the total length: For example, currently on the first page (1 1) *7 > ; 12 (total length) // then this.step assignments are for remaining, that is, the remaining number
if (this.config.view * (this.index 1) & gt; this. length ){
this.step = this.length%this.config.view;
}else{
                                                             This.step = this.config.view;
           }
                                                                                                                                                                                         dth;
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 );
                                                                                                                                 
I didn’t have a good idea about this implementation at first. I originally wanted to use a variable to record the current number of moves, but then I suddenly thought of using an array to do this kind of processing, and it suddenly became clear.

The focus of this implementation is an array that records the movement steps. When moving to the left, push the step into the array. When moving to the right, take the last item from the array [].pop().

This is a very good way to achieve the requirements, but it is a bit rough. Could you please give me some advice