关于jq插件开发

Posted 2020-10-14 嘿你的益达

很详细，原文链接：https://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html#commentform和https://www.cnblogs.com/ghost-xyx/p/5025571.html

附例子：

<div class="a_div">
            构造函数内部可以使用this关键字；普通函数内部不建议使用this，因为这时候this指向的是window全局对象，这样无意间就会为window添加了一些全局变量或函数
        </div>
        <a>点击</a>
        <script type="text/javascript">
                         //构造函数内部可以使用this关键字；普通函数内部不建议使用this，
//因为这时候this指向的是window全局对象，这样无意间就会为window添加了一些全局变量或函数
            //自调用匿名函数里面的代码会在第一时间执行，页面准备好过后，上面的代码就将插件准备好了，
            //以方便在后面的代码中使用插件
            //别人的代码也正常工作，只是最后定义的那个函数没有用分号结尾而以，然后当页面中引入我们的插件时，报错了
            //window等系统变量在插件内部就有了一个局部的引用，可以提高访问速度，会有些许性能的提升
            ;
            (function($, window, document, undefined) {
                //面向对象
                //定义对象Beautifier 的构造函数
                var Carousel = function() {};
                Carousel.prototype = {
                    //容器选择器
                    container: "",
                    //图片地址数组
                    datas: null,
                    autoplaySpeed: null,
                    autoplay: false,
                    // 初始化
                    init: function(options) {
                        this.container = options.container;
                        this.datas = options.datas;
                        this.autoplaySpeed = options.autoplaySpeed;
                        this.autoplay = options.autoplay;
                        $(this.container).html("");
                        this.createCarousel(options);
                        this.arrowHover();
                        this.tabImg();
                        this.setZindex();
                        //判断是否需要自动播放
                        if(options.autoplay || this.autoplay == true) {
                            this.autoPlay(this.autoplaySpeed);
                        } else {
                            console.log(0);
                            return;
                        }
                    },
                    createCarousel: function(options) {
                        this.createDOM(this.container, options);
                    },
                    // 生成DOM
                    createDOM: function(container, options) {
                        console.log(options);
                        var html = "";
                        html = "<div class=\'carousel-box clearfix\'>" +
                            "<div class=\'transverse-box pull-left\'>" +
                            "</div>" +
                            "<div class=\'vertical-box pull-right\'>" +
                            "<ul>" +
                            "</ul>" +
                            "</div>" +
                            "<span class=\'left-arrow\'>‹</span>" +
                            "<span class=\'right-arrow\'>›</span>" +
                            "</div>";
                        $(container).html(html);
                        var imgLength = options.datas.length;
                        for(var i = 0; i < imgLength; i++) {
                            $(".transverse-box").append("<div class=\'img-item\'><img src=\'" + options.datas[i] + "\'></div>");
                        };
                        $(".vertical-box ul").append("<li><img src=\'" + options.datas[1] + "\'></li>");
                        $(".vertical-box ul").append("<li><img src=\'" + options.datas[2] + "\'></li>");

                    },
                    arrowHover: function() {
                        $(".carousel-box").hover(function() {
                            $(".left-arrow,.right-arrow").css("display", "flex");
                        }, function() {
                            $(".left-arrow,.right-arrow").css("display", "none");
                        })
                    },
                    // 点击左右箭头触发翻页
                    tabImg: function() {
                        var obj = this;
                        $(".left-arrow").on("click", function() {
                            obj.changeZindex_add();
                        })
                        $(".right-arrow").on("click", function() {
                            obj.changeZindex_sub();
                        })
                    },
                    // 设置初始zindex
                    setZindex: function() {
                        //左侧横向TAB
                        var imgNum = $(".transverse-box").find(".img-item").length;

                        for(var i = 0; i < imgNum; i++) {
                            $(".img-item").eq(i).css({
                                "zIndex": i
                            });
                            $(".img-item").eq(i).attr("Zindex", i);
                        }
                    },
                    //前翻
                    changeZindex_add: function() {
                        var imgNum = $(".transverse-box").find(".img-item").length;
                        var lastZindex = $(".transverse-box").find(".img-item").eq(length - 1).attr("zindex");
                        var firstImgSrc = $(".transverse-box").find(".img-item").eq(0).find("img").attr("src");
                        var lastImgSrc = $(".transverse-box").find(".img-item").eq(length - 1).find("img").attr("src");
                        var last2ImgSrc = $(".transverse-box").find(".img-item").eq(length - 2).find("img").attr("src");
                        $(".transverse-box").find(".img-item").eq(0).remove();
                        $(".transverse-box").append("<div class=\'img-item\' zindex=\'" + (parseInt(lastZindex) + 1) + "\'><img src=\'" + firstImgSrc + "\'><div>");
                        $(".vertical-box ul").find("li").eq(0).find("img").attr("src", lastImgSrc);
                        $(".vertical-box ul").find("li").eq(1).find("img").attr("src", last2ImgSrc);
                        $(".transverse-box").find(".img-item").eq(length - 1).css({
                            "zIndex": parseInt(lastZindex) + 1,
                            "opacity": 0
                        }, 500);
                        $(".transverse-box").find(".img-item").eq(length - 1).animate({
                            "opacity": 1
                        }, 500);

                    },
                    // 后翻
                    changeZindex_sub: function() {
                        var imgNum = $(".transverse-box").find(".img-item").length;
                        var lastZindex = $(".transverse-box").find(".img-item").eq(length - 1).attr("zindex");
                        var firstZindex = $(".transverse-box").find(".img-item").eq(0).attr("zindex");
                        var lastImgSrc = $(".transverse-box").find(".img-item").eq(length - 1).find("img").attr("src");
                        var firstImgSrc = $(".transverse-box").find(".img-item").eq(0).find("img").attr("src");
                        var first2ImgSrc = $(".transverse-box").find(".img-item").eq(1).find("img").attr("src");
                        $(".transverse-box").find(".img-item").eq(length - 1).remove();
                        $(".transverse-box").prepend("<div class=\'img-item\' zindex=\'" + (parseInt(firstZindex) - 1) + "\'><img src=\'" + lastImgSrc + "\'><div>");
                        $(".vertical-box ul").find("li").eq(0).find("img").attr("src", firstImgSrc);
                        $(".vertical-box ul").find("li").eq(1).find("img").attr("src", first2ImgSrc);
                        $(".transverse-box").find(".img-item").eq(0).css({
                            "zIndex": parseInt(firstZindex) - 1
                        }).siblings().css("opacity", "0");
                        $(".transverse-box").find(".img-item").eq(length - 1).animate({
                            "opacity": 1
                        });

                    },
                    // 自动播放
                    autoPlay: function(x) {
                        var obj = this;
                        this.changeZindex_add();
                        setTimeout(function() {
                            obj.autoPlay(x)
                        }, x);
                    }

                }
            })(jQuery, window, document);
            //至于这个undefined，稍微有意思一点，
            //为了得到没有被修改的undefined，我们并没有传递这个参数，但却在接收时接收了它，因为实际并没有传，所以‘undefined’那个位置接收到的就是真实的\'undefined\'了
        </script>
        <script type="text/javascript">
            $(function() { //在dom文档载入完成后执行的函数
                var banner = new Carousel();
                //图片地址数组。不要少于三张
                var imgSrcDate = ["./public/img/a1.png", "./public/img/a2.png", "./public/img/a3.png", "./public/img/a4.png", "./public/img/a5.png", "./public/img/a6.png"];
                banner.init({
                    container: "#banner",
                    datas: imgSrcDate,
                    autoplaySpeed: 5000,
                    autoplay: false
                });
            });
        </script>