Javscript輪播 支援平滑和漸隱兩種效果

Javscript輪播 支援平滑和漸隱兩種效果
基本原則就是順序是按照當前顯示的為基準：如當前為2，那麼順序就是2,3,4,1；如當前為3，那麼順序就是3,4,1,2。以此類推。       整個移動劃分為三種：1、下一個  2、上一個  3、任意個      1、下一個：margin-left:-圖寬；然後將“圖1”移到最後一個位置       next: function () {            var oThis = this;            var firstItem = oThis.itemArray.shift();            oThis.itemArray.push(firstItem);            rotatePrivate.clealNvActive.call(oThis, oThis.itemArray[0].index);            //移動wrap到第二個元素            oThis.wrap.animate({ marginLeft: -oThis.itemW }, {                duration: oThis.actionTime,                easing: 'easeInOutQuint',                complete: function () {                    //第一元素移到最後                    oThis.wrap.append(firstItem.item);                    oThis.wrap.css('margin-left', 0);                    rotatePrivate.timeRun.call(oThis);                }            });        },             2、上一個：將最後一個（圖4）移到第一個，設定margin-left:-圖寬，然後動作設定成margin-left:0      pre: function () {            var oThis = this;            //找到最後一張，並移到第一張            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 () {                    //變化數組                    oThis.itemArray.splice(0, 0, lastItem);                    rotatePrivate.timeRun.call(oThis);                }             });        },             3、任意個：先判斷向前移，還是向後移動，然後根據基本原則就是順序是按照當前顯示的為基準，從新排列順序。   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) {                //把curstomItem移到後面                firstItem.item.after(customItem.item);                rotatePrivate.clealNvActive.call(oThis, customItem.index);                //foucus move to 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 {                //把curstomItem移到當前的前面，並margin-left -itemWidth                firstItem.item.before(customItem.item);                oThis.wrap.css('margin-left', -oThis.itemW);                rotatePrivate.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);                    }                });            }        }       二、再來看漸隱輪播效果 這個在原來的效果上，唯一比較有亮點的就是“漸隱如何不讓圖片白一下”？  我採用clone了一張當前，並設定position: absolute;這樣噹噹前這樣的opacity變為0時，底下的圖2就顯示出來，這樣就不那麼生硬了。       next: function () {            var oThis = this;            var firstItem = oThis.itemArray.shift();            oThis.itemArray.push(firstItem);            //將第一個clone一個，覆在上面            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 () {                    //移走clone                    firstClone.remove();                    rotatePrivate.timeRun.call(oThis);                }            });        },