基於jq的3D輪播圖插件

記一個簡單js插件封裝，怕忘了😂

封裝仍是先須要瞭解一下js原型prototype

#1. 文件主體徹底是通用套裝，對其餘框架的解釋方式處理（其實沒用過AMD，後面增強學習💪）

(function (root, factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);
    } else if (typeof exports === 'object') {
        // COMMONJS
        module.exports = factory();
    } else {
        // BROWSER
        root.YScroll = factory();
    }
}(this, function () {···
}));
複製代碼

#2. 參數的一些默認值, 擴展方法，插件的承載對象 YScroll 和它的私有參數（我這裏分得不是很清晰）

var defaults = {
        wrapper: '#YScroll',
        autoPlay: false,
        interTime: 2500,
        prevCell: ".prev",
        nextCell: ".next",
        arrow: ".arrow",
        sizeDatas: [],
        centerX: 0,
        centerY: 0,
        a: 0, //半徑：寬
        b: 0, //半徑：高
        style: 1, //展現的樣式 1:默認  2:兩側對稱
    };
    var extend = function () {···
    };
    // 插件的承載對象
    var YScroll = function () {
        this.wrapper = '';
        this.CardNumber = 0; //生成點的個數, 根據外部的li個數來肯定
        this.arc = 360;     //弧度: 默認360
        this.cardWidth = this.cardHeight = 0, //卡片寬高
        this.sizeDatas = [];
    };
複製代碼

#3. 插件主題函數

YScroll.prototype = {
        conBox: null,
        nextBtn: null,
        prevBtn: null,
        arrowD: null,
        timer: null,
        init: function (options) {···
        }, 
        animate: function () {···
        },
        nextCad: function () {···
        },
        prevCad: function () {···
        },
        doPlay: function () {/*自動播放*/···
        },
        applyEllipse: function () {···
        },
        attachEvent: function () {···
        }
    }
複製代碼

函數很簡明，這裏主要總結一下：

• 標籤和jq對象組合成新的對象： var wapperJQ = $(this.wrapper); self.conBox = $("ul li", wapperJQ);
• 插件基於jq是爲了使用它的animation（真香。。） 動畫使用jq的self.conBox.eq(i).stop().animate(data, 500);
• 動畫參數的改變：對預設形變參數數組進行循環

nextCad: function () {
            var first = YScroll.sizeDatas.shift();
            YScroll.sizeDatas.push(first);
            YScroll.animate();
        },
        prevCad: function () {
            var last = this.sizeDatas.pop();
            this.sizeDatas.unshift(last);
            this.animate();
        },
複製代碼

#4. 這裏着重提一下3D循環滾動各類參數的生成算法

- 橢圓的繪製使用的三角函數，記不住三角函數的同窗能夠參考一下公式😄：

• 錨點（x,y）：卡片的中心點，根據預設的長短半徑生成對應的橢圓（固然也能夠是圓形）,這個能夠參照三角函數

var hudu = (Math.PI / 180) * (i * pnC),
x1 = this.settings.centerX - this.settings.a * Math.sin(hudu),
y1 = this.settings.centerY + (this.settings.b * Math.cos(hudu)),
複製代碼

• z-index：始終保持頂點卡片在最前面，elopacity，始終保持頂點卡片不透明

zIndex = factor ? this.CardNumber - i : i,
elopacity = 1 - 0.02 * xCode, //透明度
複製代碼

• 卡片的尺寸縮放係數scaleX（這個有很大調整空間），根據設置的style（目前只有兩種）生成不一樣風格的排列風格。
• 卡片的top，left也受到scaleX的影響

switch (this.settings.style) {
                    case 1: //尺寸係數 --1   默認
                        {
                            scaleX = 1 - xCode * (factor ? cose1 *= 0.9 : cose1 /= 0.92);
                        }
                        break;
                    case 2://尺寸係數 --2 -左右對稱   i太大 (圓弧描點 )會致使尺寸太小
                        {
                            scaleX = 1 - xCode * 0.12;
                            .2>scaleX && (scaleX = lastScale);
                            lastScale = scaleX;//防止尺寸過小
                        }
                }
複製代碼

附上github地址3D-Yscroll

總的來講代碼不存在難度，將就着用了