Javscript Carousel supports both smoothing and fading effects (only two graphs can be used)

first two kinds of carousel effects: fade and move effect one: Fade1 2 3 4 effect Two: Move1 2 3 4

Next, let's outline the whole idea of carousel:

First, to see the simple, moving, first come up with a figure----move:

Description

The basic principle is that the order is based on the current display: if the current is 2, then the order is 2,3,4,1, and if the current is 3, then the order is 3,4,1,2. And so on

The entire movement is divided into three kinds: 1, the next 2, the previous 3, any one

1. Next: margin-left:-the width of the chart, then move Figure 1 to the last position

Nextfunction () {            varOthis = This; varFirstItem =OThis.itemArray.shift ();            OThis.itemArray.push (FirstItem); RotatePrivate.clealNvActive.call (Othis, othis.itemarray[0].index); //Move Wrap to a second elementOThis.wrap.animate ({marginleft:-OTHIS.ITEMW}, {duration:oThis.actionTime, easing:' Easeinoutquint ', Complete:function () {                    //the first element moves to the lastoThis.wrap.append (Firstitem.item); OThis.wrap.css (' Margin-left ', 0);                RotatePrivate.timeRun.call (Othis);        }            }); },

2. Previous: Move the last one (Figure 4) to the first one, set the margin-left:-width, and then set the action to margin-left:0

Prefunction () {            varOthis = This; //find the last one and move to the first one            varLastItem =OThis.itemArray.pop ();            OThis.wrap.prepend (Lastitem.item); OThis.wrap.css (' Margin-left ',-OTHIS.ITEMW);            RotatePrivate.clealNvActive.call (Othis, Lastitem.index); OThis.wrap.animate ({marginleft:0}, {duration:oThis.actionTime, easing:' Easeinoutquint ', Complete:function () {                    //Array of ChangesOThis.itemArray.splice (0, 0, LastItem);                RotatePrivate.timeRun.call (Othis);        }            }); },

3, any: the first to determine the move forward, or backward, and then according to the basic principle is that the order is based on the current display as the baseline, the new arrangement order.

Curstom:function(i) {varOthis = This; varCustomitem =NULL;  for(varHinchOthis.itemarray) {if(Othis.itemarray[h].index = =i) {Customitem=Othis.itemarray[h];  Break; }            }            varFirstItem = othis.itemarray[0]; //at the back of the activity            if(Customitem.index >firstitem.index) {//move the Curstomitem to the back .FirstItem.item.after (Customitem.item);                RotatePrivate.clealNvActive.call (Othis, Customitem.index); //foucus move to CurstomitemOThis.wrap.animate ({marginleft:-OTHIS.ITEMW}, {duration:oThis.actionTime, complete:function () {                        //Sort by CustomitemRotatePrivate.sortItem.call (Othis, Customitem); OThis.wrap.css (' Margin-left ', 0);                    RotatePrivate.timeRun.call (Othis);            }                }); } Else {                //move the Curstomitem to the front of the current and Margin-left-itemwidthFirstItem.item.before (Customitem.item); OThis.wrap.css (' Margin-left ',-OTHIS.ITEMW);                RotatePrivate.clealNvActive.call (Othis, Customitem.index); //foucus move to CurstomitemOThis.wrap.animate ({marginleft:0}, {duration:oThis.actionTime, complete:function () {                        //Sort by CustomitemRotatePrivate.sortItem.call (Othis, Customitem);                    RotatePrivate.timeRun.call (Othis);            }                }); }        }

Second, to see the effect of fade-out carousel

This in the original effect, the only comparison has a bright spot is "how to not let the picture white"?

Fig. 1 Fig. 2 Fig. 3 Fig. 4

Figure 1 Cloning

Fig. 2 Fig. 3 Fig. 4 Fig. 1

I used clone to have a current and set position:absolute, so that when the current such opacity becomes 0 o'clock, the bottom figure 2 is shown, so it is less blunt.

Nextfunction () {            varOthis = This; varFirstItem =OThis.itemArray.shift ();            OThis.itemArray.push (FirstItem); //one of the first clones, covered in the top            varFirstclone =FirstItem.item.clone (); Firstclone.addclass (' Rotate-trans '); Firstclone.removeclass (' Rotate-item ');            OThis.wrap.append (Firstclone); //First ele move to LastoThis.wrap.append (Firstitem.item); varSecondItem = othis.itemarray[0];            RotatePrivate.clealNvActive.call (Othis, Seconditem.index); Firstclone.animate ({opacity:0}, {duration:oThis.actionTime, complete:function () {                    //Remove CloneFirstclone.remove ();                RotatePrivate.timeRun.call (Othis);        }            }); },

Javscript Carousel supports both smoothing and fading effects (only two graphs can be used)