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