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

(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