前阵子看了陈情令。嘻嘻嘻，王一博真好看。。。昨天做了一个轮播图的插件，放上博机的照片好好看。。。
先放个效果图
下午再详细写如何实现的插件，并将代码到github ^-^
回顾写jQuery插件的步骤
1将jQuery插件的代码写在闭包里。
(function($){//do something})(jQuery)
这样写的好处：避免全局依赖、避免第三方破坏、兼容jQuery操作符“$”和jQuery
2开发方式有两种：类级别组件开发和对象级别
类级别组件开发：给jQuery命名空间下添加新的全局函数，也称为静态方法
jQuery.myPlugin=function(){// do something}
例如$.Ajax() 、$.extend()
对象级别组件开发：即挂在jQuery原型下的方法，这样通过选择器获取的jQuery对象实例也能共享该方法，也称为动态方法。
$.fn.myPlugin=function(){//do something};
这里的$.fn === $.prototype
例如：addClass(),attr()等，需要创建实例来调用
3 链式调用 return this 返回当前对象，来维护插件的 链式调用
each 循环实现每个元素的访问
4 采用动态方法就需要生成实例 这里的实例创建有中单例模式的概念
$.fn.Carousel = function(options){//单例模式return this.each(function(){var _this = $(this),instance =_this.data("Carousel");if(!instance){_this.data("Carousel",(instance=new Carousel(_this,options)));}})}
如果实例存在就不再重新创建实例，利用data()来存放插件对象
1 先写个DOM结构
<div class="poster-main"><div class="poster-btn poster-prev-btn"></div><ul class="poster-list"><li class="poster-item"><img src="img/boji/1.jpg" width="100%" alt="tu1"></li><li class="poster-item"><img src="img/boji/2.jpg" width="100%" alt="tu1"></li><li class="poster-item"><img src="img/boji/3.jpg" width="100%" alt="tu1"></li><li class="poster-item"><img src="img/boji/4.jpg" width="100%" alt="tu1"></li><li class="poster-item"><img src="img/boji/5.jpg" width="100%" alt="tu1"></li><li class="poster-item"><img src="img/boji/6.jpg" width="100%" alt="tu1"></li><li class="poster-item"><img src="img/boji/7.jpg" width="100%" alt="tu1"></li></ul><div class="poster-btn poster-next-btn"></div></div>
2 CSS样式
/* 旋转木马必要样式 */.poster-main{position: relative;width: 800px;/*高度设置为图片的高度*/height: 270px;}/* ul 的宽高与图片的宽高一样 相对ul的left值不一样 */.poster-main .poster-list{width: 800px;height: 270px;}.poster-main a,.poster-main img{display: block;}/* li item 宽度高度不一样，相对于这里也是需要计算的 层级关系 透明度也不一样 需要JS控制*/.poster-main .poster-item{position: absolute;top:0;left: 0;}/* 上下切换的按钮 */.poster-btn{position:absolute;top:0;width:100px;height: 270px;z-index: 10;cursor: pointer;opacity: 0.8;}.poster-main .poster-prev-btn{left: 0;background: url(../img/btn_l.png) no-repeat center center}.poster-main .poster-next-btn{right: 0;background:url(../img/btn_r.png) no-repeat center center}
3Carousel插件的主体结构
(function($){var Carousel = (function(){//定义函数的形式封装一个插件var Carousel= function(element,options){this.setting = $.extend(true,$.fn.Carousel.defaults, options||{});//保存单个对象this.element = element;this.init();};Carousel.prototype={/*说明：初始化插件*//*实现：初始化dom结构，布局，分页及绑定事件*/init:function(){}, //自动播放的函数autoPlay:function () { },//旋转函数实现幻灯片左右移动的动画carouseRotate:function (dir) { },//设置剩余帧的关系 每一帧图片偏移的位置setPosterPos:function(){},//设置垂直对齐关系setVerticalAlign:function(height){//},//设置配置参数值去控制幻灯片基本的宽度和高度。。setSettingValue:function(){},}return Carousel;})();$.fn.Carousel = function(options){//单例模式return this.each(function(){var _this = $(this),instance =_this.data("Carousel");if(!instance){_this.data("Carousel",(instance=new Carousel(_this,options)));}})}//配置默认参数$.fn.Carousel.defaults = {}$(function(){$('[data-Carousel]').Carousel();});})(jQuery)
github地址：/cindyHua901/Carousel
