基于jq的3D轮播图插件

记一个简单js插件封装，怕忘了:joy:

封装还是先需要了解一下js原型prototype

#1. 文件主体完全是通用套装，对其他框架的解释方式处理（其实没用过AMD，后面加强学习:muscle:）

(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 () {···
        }
    }
复制代码

函数很简明，这里主要总结一下：

var wapperJQ = $(this.wrapper); self.conBox = $("ul li", wapperJQ);
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循环滚动各种参数的生成算法

- 椭圆的绘制使用的三角函数，记不住三角函数的同学可以参考一下公式:smile:：

• 锚点（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

总的来说代码不存在难度，将就着用了