Javascript輪播 支持平滑和漸隱兩種效果（可以只有兩張圖）

先上兩種輪播效果：漸隱和移動

 

效果一：漸隱

1 2 3 4

效果二：移動

1 2 3 4

 

接下來，我們來大致說下整個輪播的思路：

一、先來看簡單的，移動的，先上來一個圖----移動效果圖：

說明：

      基本原則就是順序是按照當前顯示的為基准：如當前為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);
                    }
                });
            }
        }

 

 

 

二、再來看漸隱輪播效果

這個在原來的效果上，唯一比較有亮點的就是“漸隱如何不讓圖片白一下”？

圖1   圖2  圖3   圖4

 

 

圖1克隆

圖2   圖3  圖4   圖1

我采用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);
                }
            });
        },

 相關代碼：Rotate.rar