The effect of a jquery picture scrolling picture

Source: Internet
Author: User
Tags config prev

 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    

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.