基于webkit的图片轮播封装

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;}

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

(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");