基于jquery的js幻灯片类

Css:

<style type="text/css">
.slideStyle{position:relative;width:750px; height:300px; border:1px solid red;}
.slideStyle div.slideBox{ position:relative;width:750px; height:300px; overflow:hidden;}
.slideStyle div.slideBox ul.imgList{ position:absolute;left:0; top:0;}
.slideStyle div.slideBox ul.imgList li{ height:300px;}
.slideStyle div.slideBox ul.imgList li a{ display:block;}
.slideStyle ol.btnList{ position:absolute; right:20px; bottom:10px; height:20px;}
.slideStyle ol.btnList li{ float:left; margin-left:10px;}
.slideStyle ol.btnList li a{ display:block; width:15px; height:15px; text-decoration:none; line-height:15px; overflow:hidden; text-align:center;background:#0F0; color:#fff;}
.slideStyle ol.btnList li.selected a{ background:#63F;}
</style>

DOM:

<div class="Slide slideStyle" data-param='
{"type":"scrollTop",
"speed":"1",
"mouseType":"mouseover",
"delay":"0.2",
"auto":"true",
"autoTime":"5",
"defaultVisibleItem":"1"
}'>
<div class="slideBox">
<ul class="imgList">
<li><a href="#"><img src="1.jpg" /></a></li>
<li><a href="#"><img src="1.jpg" /></a></li>
<li><a href="#"><img src="1.jpg" /></a></li>
<li><a href="#"><img src="1.jpg" /></a></li>
</ul>
</div>
<ol class="btnList">
<li class="selected"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ol>
</div>

 

JS:

//插件名称:幻灯片
//版权所有:杨永
//QQ:377746756
//兼容性:所有主流浏览器(ie6-8,ff,op,sf,ch).
//开发日期:2012-08-31
/**
@提供五种效果，向上滚动，向左滚动，渐入效果，始终向右，始终向上
@type:["scrollTop"||"scrollLeft"||"fadeIn"||"dirLeft"||"dirTop"] 幻灯片类型
@speed:["fast"||"slow"||"normal"||0.2] 幻灯片执行的速度
@mouseType:["mouseover"||"click"] 鼠标事件
@delay:0.2 鼠标事件延时执行
@auto:[true||false] 是否自动执行幻灯片
@autoTime:number 自动执行幻灯片的间隔时间
@defaultVisibleItem：number 指定默认显示哪一帧幻灯片 不给值为1 
*/
function Slide(i){
this.slidePlugIn=$(".Slide").eq(i);//保存幻灯片插件
this.btnList=$("ol.btnList>li",this.slidePlugIn);//保存按钮数组
this.scrollBox=$("ul.imgList",this.slidePlugIn);//保存幻灯片对象
this.scrollBoxInnerLis=this.scrollBox.children("li");//保存li列表
this.imgLength=$("li",this.scrollBox).length;//初始化幻灯片图片的数量
this.dataParamObj=$.parseJSON(this.slidePlugIn.attr("data-param"));//将插件节点的数据参数转换为json对象
/**
{
"type":"scrollTop",
"speed":"fast",
"mouseType":"mouseover",
"delay":"0.2",
"auto":"true",
"autoTime":"2",
"defaultVisibleItem":"2"
}
*/
this.slideWidth=this.slidePlugIn.width();//获取幻灯片的宽度
this.slideHeight=this.slidePlugIn.height();//获取幻灯片的高度
var _this=this;
var t;//定义一个延时的指针
this.loop=0;//一个计数器来实现自动轮播
this.autoT;
if(this.dataParamObj.type=="scrollLeft"||this.dataParamObj.type=="dirLeft"){//重置滚动区域的宽度
this.scrollBox.children("li").css("float","left").end().width(this.slideWidth*this.imgLength);
};
if(this.dataParamObj.type=="dirLeft"||this.dataParamObj.type=="dirTop"){//如果是单一方向轮播，就设置绝对定位
this.scrollBoxInnerLis.css({
position:"absolute",
display:"none"
}).eq(0).css("display","block");
};


this.btnList.bind(this.dataParamObj.mouseType,function(){
var index=$(this).index(),$this=this;
t=window.setTimeout(function(){
_this.loop=index;
if(_this.dataParamObj.type=="scrollLeft"){
_this.scrollLeft(index);
}else if(_this.dataParamObj.type=="scrollTop"){
_this.scrollTop(index);
}else if(_this.dataParamObj.type=="dirLeft"){
_this.dirLeft(index);
}else if(_this.dataParamObj.type=="dirTop"){
_this.dirTop(index);
}else{
_this.fadeIn(index);
};
$($this).addClass("selected").siblings().removeClass("selected");
},_this.dataParamObj.delay*1000);
});
if(this.dataParamObj.mouseType=="mouseover"){
this.btnList.mouseout(function(){
window.clearTimeout(t);
});
};
if(this.dataParamObj.auto=="true"){
this.autoPlay();
this.scrollBox.mouseover(function(){
window.clearInterval(_this.autoT);
}).mouseout(function(){
_this.autoPlay();
});
}

if(this.dataParamObj.defaultVisibleItem){
this.difaultVisible(Number(this.dataParamObj.defaultVisibleItem)-1);
}

};
Slide.prototype={
scrollLeft:function(i){//向左滚动
this.scrollBox.stop().animate({left:-i*this.slideWidth+"px"},Number(this.dataParamObj.speed)*1000||this.dataParamObj.speed);
},
scrollTop:function(i){//向上滚动
this.scrollBox.stop().animate({top:-i*this.slideHeight+"px"},Number(this.dataParamObj.speed)*1000||this.dataParamObj.speed);
},
dirLeft:function(i){//始终向左切换
var _this=this;
if(this.scrollBoxInnerLis.eq(i).is(":visible")){//如果当前帧是显示的，就退出执行！
return;
};
this.scrollBoxInnerLis.eq(i).css({
display:"block",
left:this.slideWidth+"px"
}).parent().animate({left:-this.slideWidth+"px"},Number(this.dataParamObj.speed)*1000||this.dataParamObj.speed,function(){
$(this).css("left",0);
_this.scrollBoxInnerLis.eq(i).css("left",0).siblings().css({
display:"none",
left:0
});
});
},
dirTop:function(i){//始终向上切换
var _this=this;
if(this.scrollBoxInnerLis.eq(i).is(":visible")){//如果当前帧是显示的，就退出执行！
return;
};
this.scrollBoxInnerLis.eq(i).css({
display:"block",
top:this.slideHeight+"px"
}).parent().animate({top:-this.slideHeight+"px"},Number(this.dataParamObj.speed)*1000||this.dataParamObj.speed,function(){
$(this).css("top",0);
_this.scrollBoxInnerLis.eq(i).css("top",0).siblings().css({
display:"none",
top:0
});
});




},
fadeIn:function(i){//渐入
this.scrollBox.children("li").hide().eq(i).fadeIn(Number(this.dataParamObj.speed)*1000||this.dataParamObj.speed);
},
autoPlay:function(){//自动播放
var btns=this.btnList,_this=this;
this.autoT=window.setInterval(function(){
_this.loop++;
if(_this.loop==btns.length){
_this.loop=0;
};
btns.eq(_this.loop).trigger(_this.dataParamObj.mouseType);

},this.dataParamObj.autoTime*1000);


},
difaultVisible:function(i){
this.btnList.eq(i).trigger(this.dataParamObj.mouseType);
}
};

Slide.init=function(){
var _this=this;
$(".Slide").each(function(i){
new _this(i);
});

};
Slide.init();