基于webkit的图片轮播封装

最近接到的项目中，图片轮播相当多，为了减少重复工作和麻烦，干脆封装了一个

1、css

div{position: relative;width: 555px;margin: 0 auto;height: 175px;overflow: hidden}
img{display: block;width: 175px;height: 175px;position: absolute;top: 0;margin: 0 10px;}

2、html

<div>
    <img id="list_0"  />
    <img id="list_1" />
    <img id="list_2" />
    <img id="list_3" />
    <img id="list_4" />
</div>

3、js

    (function(){
        //参数，对象宽度，数据，回调，对象id前缀如objid_，图片显示个数，当前焦点位置默认为0
        var _widht,_data,_callback,_objID,_count,_postion;
        
        //私有变量，数据长度，交换数量（图片显示个数+2）
        var len,count;
        var index = 0;//初始索引值
        var overFlag = true;//动画开关
        var time = 500;//动画时间500毫秒
        var timer = null;//定时器
        var widthArray=new Array();//对象交换宽度定位
        var objList = new Array();//对象id组
        var indexArray = new Array();//交换索引
        
        var $=function(__id){
            return document.getElementById(__id);
        }
        
        var ScrollObj = (function(){
            //取得相关配置及数据
            var set=function(width,data,callback,objid,count,postion){
                _widht = width;
                _data = data;
                _callback = callback;
                _objID = objid;
                _count = count;
                _postion = postion || 0;
                setObj();
            }
            //设置对象长度等
            var setObj = function(){
                for (var i=-1; i < _count+1; i++) {
                    objList.push($(_objID + (i+1)));
                      widthArray.push(i*_widht);
                      indexArray.push(i+1);
                };
                initialize();
            }
            //初始化
            var initialize = function(){
                len = _data.length;
                for (var i=0; i < len&&i<_count+2; i++) {
                    objList[i].src = _data[((index-_postion+i)%len+len)%len].img;//插入数据
                    objList[indexArray[i]].style.left=widthArray[i]+"px";//给对象定位
                };
            }
            //控制器
            var controller = function(direction){
                if(direction=="left"||direction=="right"){
                if(overFlag==false)return;
                overFlag=false;
                if(timer != null) clearTimeout(timer);
                if(direction=="right"){
                    var deleObj = indexArray.splice(0,1);
                     indexArray.splice(indexArray.length,0,deleObj);//交换位置
                     index++;
                }else if(direction=="left"){
                    var deleObj = indexArray.splice(indexArray.length-1,1);
                    indexArray.splice(0,0,deleObj);//交换位置
                    index--;
                }
                for(var i=0;i<_count+2;i++){
                        if((i==_count+1&&direction=="right")||(i==0&&direction=="left")){
                            objList[ indexArray[i]].style.webkitTransitionDuration='0s';
                        }else{
                            objList[indexArray[i]].style.webkitTransitionDuration='0.5s';
                        }
                        objList[indexArray[i]].src = _data[((index-_postion+i)%len+len)%len].img;//交换数据
                        objList[indexArray[i]].style.left=widthArray[i]+"px";
                    }
                }
                if(!!_callback && typeof(_callback)=="function")_callback((index%len+len)%len);//回调，传递当前图片索引，还可以传递其它的，自定义
                objList[indexArray[1]].addEventListener('webkitTransitionEnd',function(e){
                    //console.log(e,e.type,e.propertyName);
                   overFlag = true;
                   timer=setTimeout(function(){
                        controller(direction)
                       },time)
                },false);
                //定时器
            }
            //返回对象
            return {
                init:set,
                controller:controller
            }
        })();
        //对外开放特权函数
        this.ScrollObj = ScrollObj;
    })()
    
    //数据
    var data =[{img:"images/music_1.png"},{img:"images/music_2.png"},{img:"images/music_3.png"},{img:"images/music_4.png"},{img:"images/music_5.png"}];
    //回调函数
    function displayInfo(info){
        //console.log(info);
    }
    //初始化
    ScrollObj.init(185,data,displayInfo,"list_",3,2);
    //控制器，方便扩展和添加键盘事件
    ScrollObj.controller("right");