效果圖

記一個簡單js插件封裝，怕忘了??
封裝還是先需要了解一下js原型prototype

1. 文件主體完全是通用套裝，對其他框架的解釋方式處理（其實(shí)沒用過AMD，后面加強(qiáng)學(xué)習(xí)??）

(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. 參數(shù)的一些默認(rèn)值, 擴(kuò)展方法，插件的承載對象 YScroll 和它的私有參數(shù)（我這里分得不是很清晰）

    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:默認(rèn)  2:兩側(cè)對稱
    };
    var extend = function () {···
    };
    // 插件的承載對象
    var YScroll = function () {
        this.wrapper = '';
        this.CardNumber = 0; //生成點(diǎn)的個數(shù), 根據(jù)外部的li個數(shù)來確定
        this.arc = 360;     //弧度: 默認(rèn)360
        this.cardWidth = this.cardHeight = 0, //卡片寬高
        this.sizeDatas = [];
    };

3. 插件主題函數(shù)

 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 () {···
        }
    }

函數(shù)很簡明，這里主要總結(jié)一下：

• 標(biāo)簽和jq對象組合成新的對象：
  var wapperJQ = $(this.wrapper); self.conBox = $("ul li", wapperJQ);
• 插件基于jq是為了使用它的animation（真香。。）
  動畫使用jq的self.conBox.eq(i).stop().animate(data, 500);
• 動畫參數(shù)的改變：對預(yù)設(shè)形變參數(shù)數(shù)組進(jìn)行循環(huán)

        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循環(huán)滾動各種參數(shù)的生成算法

- 橢圓的繪制使用的三角函數(shù)，記不住三角函數(shù)的同學(xué)可以參考一下公式??：

三角函數(shù)

• 錨點(diǎn)（x,y）：卡片的中心點(diǎn)，根據(jù)預(yù)設(shè)的長短半徑生成對應(yīng)的橢圓（當(dāng)然也可以是圓形）,這個可以參照三角函數(shù)

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：始終保持頂點(diǎn)卡片在最前面，elopacity，始終保持頂點(diǎn)卡片不透明

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

• 卡片的尺寸縮放系數(shù)scaleX（這個有很大調(diào)整空間），根據(jù)設(shè)置的style（目前只有兩種）生成不同風(fēng)格的排列風(fēng)格。
• 卡片的top，left也受到scaleX的影響

                switch (this.settings.style) {
                    case 1: //尺寸系數(shù) --1   默認(rèn)
                        {
                            scaleX = 1 - xCode * (factor ? cose1 *= 0.9 : cose1 /= 0.92);
                        }
                        break;
                    case 2://尺寸系數(shù) --2 -左右對稱   i太大 (圓弧描點(diǎn) )會導(dǎo)致尺寸過小
                        {
                            scaleX = 1 - xCode * 0.12;
                            .2>scaleX && (scaleX = lastScale);
                            lastScale = scaleX;//防止尺寸太小
                        }
                }

over～

附上github地址3D-Yscroll
總的來說代碼不存在難度，將就著用了