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 was written based on jQuery. I just wanted to remember that I didn't talk much about it. I posted the Code as follows: (function ($) {var slider = function (elem, args) {this. config = $. extend ({effect: 'X', // effect level-xspeed: 600, // animation speed trigger: 'mouseenter', // trigger Event callback: null, // callback function view: 7}, args ||{}); this. history = []; // records the history of movement 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 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 this directly. index --; var step = this. history. pop (); // obtain the final 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 it is the last page of the current, directly returnif (this. index = parseInt (this. length/this. config. view, 10) {return;} this. index ++; // This computation is very important // The computation (* view on the next page) shows whether the number is greater than the total length: like the current one on the first page (1 + 1) * 7> 12 (total length) // this. the value assigned by step is the remainder, that is, the number of remaining values to be moved if (this. config. view * (this. index + 1)> this. length) {this. step = this. length % this. config. view;} else {// otherwise, move the number of displays this. step = this. config. view;} // record the historical movement record 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) began to have no idea about this implementation. I originally 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.