关于【jq插件开发】
很详细，原文链接：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>
