Javscript carousel supports smooth and gradient effects

Javscript carousel supports smooth and gradient effects
The basic principle is that the sequence is displayed as the benchmark. For example, if the current value is 2, the sequence is 2, 3, 4, and 1. If the current value is 3, the sequence is 3, 4, 2. And so on. The entire movement is divided into three types: 1, the next 2, the last 3, any 1, and the next: margin-left:-graph width; next: function () {var oThis = this; var firstItem = oThis. itemArray. shift (); oThis. itemArray. push (firstItem); rotatePrivate. clealNvActive. call (oThis, oThis. itemArray [0]. index); // move wrap to the second element oThis. wrap. animate ({marginLeft:-oThis. itemW}, {duration: oThis. actionTime, easing: 'easeinoutquint', complete: function () {// move the first element to the end OThis. wrap. append (firstItem. item); oThis.wrap.css ('margin-left', 0); rotatePrivate. timeRun. call (oThis) ;}}) ;}, 2. Previous one: Move the last one (figure 4) to the first one, and set the margin-left:-graph width, then set the action to margin-left: 0 pre: function () {var oThis = this; // locate the last one and move it to the first var lastItem = 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 () {// variable array oThis. itemArray. splice (0, 0, lastItem); rotatePrivate. timeRun. call (oThis) ;}}) ;}, 3. Any one: first judge whether to move forward or backward, and then follow the basic principle that the order is based on the currently displayed benchmark, sort them in a new order. Curstom: function (I) {var oThis = this; var customItem = null; for (var h in oThis. itemArray) {if (oThis. itemArray [h]. index = I) {customItem = oThis. itemArray [h]; break;} var firstItem = oThis. itemArray [0]; // if (customItem. index> firstItem. index) {// move curstomItem to firstItem. item. after (customItem. item); rotatePrivate. clealNvActive. call (oThis, customItem. index); // foucus move Curstomitem oThis. wrap. animate ({marginLeft:-oThis. itemW}, {duration: oThis. actionTime, complete: function () {// sort by customitem rotatePrivate. sortItem. call (oThis, customItem); oThis.wrap.css ('margin-left', 0); rotatePrivate. timeRun. call (oThis) ;}}) ;}else {// move curstomItem to the front of the current and margin-left-itemWidth firstItem. item. before (customItem. item); oThis.wrap.css ('margin-left',-oThis. itemW); r OtatePrivate. clealNvActive. call (oThis, customItem. index); // foucus move to curstomitem oThis. wrap. animate ({marginLeft: 0}, {duration: oThis. actionTime, complete: function () {// sort by customitem rotatePrivate. sortItem. call (oThis, customItem); rotatePrivate. timeRun. call (oThis) ;}}}ii. Let's take a look at the gradient carousel effect. The only highlight of the original effect is "How can we prevent the image from being white "? I clone a current file and set position: absolute; so that when the current opacity changes to 0, Figure 2 below is displayed, which is not so stiff. Next: function () {var oThis = this; var firstItem = oThis. itemArray. shift (); oThis. itemArray. push (firstItem); // clone the first one and overwrite it with var firstClone = firstItem. item. clone (); firstClone. addClass ('rotate-trans '); firstClone. removeClass ('rotate-item'); oThis. wrap. append (firstClone); // first ele move to last oThis. wrap. append (firstItem. item); var secondItem = oThis. itemArray [0]; rotatePrivate. clealNvActive. call (oThis, secondItem. index); firstClone. animate ({opacity: 0}, {duration: oThis. actionTime, complete: function () {// remove clone firstClone. remove (); rotatePrivate. timeRun. call (oThis );}});},