图片轮播插件的设计抽象

提出需求
首页的轮播焦点图是个常见的需求。
需求是这样子的
1 每隔2秒切换一次图片
2 切换图片的时候，会对应显示该图片的说明
3 切换图片的时候，对应显示图片处于小按钮中的第几个，点击小按钮时跳到对应的大图
4 自动滚动图片，鼠标放到图片区域时，停止滚动，移出时继续
5 点击左右可以上下切换图片
对于做一个图片轮播并不难，按照要求，写代码就行。而如何设计一个通用的图片轮播组件确实需要好好思考。
因为样式是不确定的，同时html结构也是不确定的。所以问改如何设计这个轮播js呢？

使用插件？
我是反插件的，除非插件的代码足够简单和清晰。否则，使用插件后，以后的维护会有太多问题。当想改插件的某个功能时，会发现不可能了。

普通的方法

setInterval(function(){
　　scrollPicture()
　　showPictureNotice()
　　AddSlectedState()
},2000)
bind(left,right)
bind(selected)

大概意思就这样，每隔2秒，滚动图片，显示图片说明，给对应的小图片加选中状态
绑定左右事件，绑定选择小图片事件
这样写，结果是每次需求都要写一遍，麻烦

抽象
会发现每次滚动，其实都是一次帧的切换。然后出发对应的一系列操作。所以就抽出来的核心就是帧的切换操作

function BaseFrameSwitch(o) {
    o = $.extend({
        interval : 3000,  //滚动间隔
        picNums : null  //图片张数
    }, o);
    this.para = o;  //参数
    this.intervalFunc = null;   //间隔函数
    this.seat = 1;      //现在的位置
    this.picNums = this.para.picNums;     //图片张数
}


BaseFrameSwitch.prototype = {
    enterFrame : function() {
        var me = this;
        $.each(this.todo, function(a, b) {
            b.apply(me, arguments);
        });
    },
    leaveFrame: function() {
        this.leaveCall && this.leaveCall.apply(this,arguments);
    },
    frame : function(a, b) {
        this.leaveFrame();
        if (a) {
            if (a < 1 || a > this.picNums) {
                alert('input number from 1 to length of pictures');
                return false;
            }
            this.seat = a;
        } else if (b) {
            this.seat += b;
            (this.seat === 0) && (this.seat = this.picNums);
            (this.seat === this.picNums + 1) && (this.seat = 1);
        }
        this.enterFrame();
    },
    go : function() {
        var me = this;
        this.intervalFunc = setInterval(function() {
            me.next();
        }, this.para.interval);
    },
    stop : function() {
        clearInterval(this.intervalFunc);
    },
    enter : function(i) {
        this.frame(i);
    },
    next : function() {
        this.frame(null, 1);
    },
    prev : function() {
        this.frame(null, -1);
    }
};

 

this.todo是需要添加的操作，貌似记得AS3中有个onEnterFrame，上面就是这个意思。
然后下面就是继承上面的baseFrame，而具体的不同实现在todo中去实现。
。。。

有点多，好像跟普通模式区别不大。。。
唯一的好处，就是不需要写切换的逻辑，只需要继承，并且有一些借口可以直接用。
写完这个，就感觉到，所谓的动画都是这种一帧帧的改变，就像fps游戏一样，每帧一次

这里是几个实例  http://www.riyue.me/plugin/slide/index.html