做一个jQuery插件---带“旋转木马”效果的轮播图

前阵子看了陈情令。嘻嘻嘻，王一博真好看。。。昨天做了一个轮播图的插件，放上博机的照片好好看。。。

先放个效果图

下午再详细写如何实现的插件，并将代码到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}

3 Carousel插件的主体结构

(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地址：https://github.com/cindyHua901/Carousel