jquery实现的经典模式幻灯片效果

Question

function tdSlider(td_w,td_h,td_b,td_title,td_img,td_time)
{
var w=(td_w-td_b*2)+"px";
var h=(td_h-td_b*2)+"px";
var b=td_b+"px solid #333";
var title=td_title+"px";
var liObj=$("#tdSlider ul li");
var maxIndex=$("#tdSlider ul li").length;
if(td_img)
{
//$("#tdSlider img").lazyload({placeholder:td_img,effect:"fadeIn",threshold:100});//如果你将jquery的lazyload模块加载了，此图片缓冲就可以使用了
}
if(td_time)
{
td_time=3000;//如果未设置轮番时间，就设置为默认3秒
}
$("#tdSlider").css({"position":"relative","top":"0px","left":"0px","width":td_w+"px","height":td_h+"px","overflow":"hidden"});
$("#tdSlider ul").css({"margin":"0px","padding":"0px","list-style":"none","width":w,"height":h,"border":b,"overflow":"hidden"});
$("#tdSlider li").css({"width":w,"height":h,"overflow":"hidden","margin":"0px","padding":"0px","position":"absolute","top":td_b+"px","left":td_b+"px"});
$("#tdSlider img").css({"width":w,"height":h,"border":"0px"});
$("#tdSlider ul li h4").css({"width":"100%","height":"22px","line-height":"22px","overflow":"hidden","display":"block","position":"absolute","top":title,"left":"0px","background":"url(/images/touming.png) repeat-x","text-align":"center","font-size":"12px","color":"#069","padding":"0px","margin":"0px"});
$("#tdSlider ul li a").css({"text-decoration":"none"});
for(i=0; i<liObj.length; i++)
{
zIndex=100-i;
k=liObj.length-i;
liObj.eq(i).css({"z-index":zIndex});
liObj.eq(i).hide();
$("#tdSlider").append("<span>"+k+"</span>");
}
$("#tdSlider span").css({"display":"block","position":"relative","z-index":"10001","float":"right","border":"1px solid #666","padding":"1px","margin-right":"5px","font-size":"12px","width":"16px","height":"18px","line-height":"18px","text-align":"center","top":"-25px","left":"0px","background":"#FFF","cursor":"default"});
var spanObj=$("#tdSlider span");
spanObj.hover(function(){
for(i=0; i<spanObj.length; i++)
{
$("#tdSlider span").eq(i).css({"background":"#FFF","color":"#000"});
}
for(i=0; i<spanObj.length; i++)
{
if(spanObj.eq(i).html()==$(this).html())
{
for(j=0; j<spanObj.length; j++)
{
if(liObj.eq(j).is(":visible"))
{
liObj.eq(j).fadeOut(500);
}
}
liObj.eq(spanObj.length-i-1).fadeIn(500);
$("#tdSlider span").eq(i).css({"background":"#F60","color":"#FFF"});
break;
}
}
clearInterval(td_slide);
},
function(){
td_slide=setInterval("tdSliderStart()",td_time);
}
);
liObj.eq(0).fadeIn(500);
var td_slide=setInterval("tdSliderStart()",td_time);
$("#tdSlider span").eq(maxIndex-1).css({"background":"#F60","color":"#FFF"});
}
function tdSliderStart()
{
var liObj=$("#tdSlider ul li");
maxIndex=(liObj.length)-1;
for(i=0; i<liObj.length; i++)
{
if(i==maxIndex && liObj.eq(i).is(":hidden"))
{
liObj.eq(0).fadeIn(500);
liObj.eq(maxIndex).fadeOut(500);
$("#tdSlider span").eq(maxIndex).css({"background":"#F60","color":"#FFF"});
$("#tdSlider span").eq(0).css({"background":"#FFF","color":"#000"});
return;
}
else if(liObj.eq(i).is(":visible") && i!=maxIndex)
{
liObj.eq(i).fadeOut(500);
liObj.eq(i+1).fadeIn(500);
$("#tdSlider span").eq(maxIndex-(i+1)).css({"background":"#F60","color":"#FFF"});
$("#tdSlider span").eq(maxIndex-i).css({"background":"#FFF","color":"#000"});
return;
}
else if(liObj.eq(i).is(":visible") && i==maxIndex)
{
liObj.eq(i).fadeOut(500);
liObj.eq(0).fadeIn(500);
$("#tdSlider span").eq(maxIndex).css({"background":"#F60","color":"#FFF"});
$("#tdSlider span").eq(0).css({"background":"#FFF","color":"#000"});
return;
}
}
} 此特效使用DEMO：
<div id="tdSlider">
  <ul>
<li><img src="/photo/1.jpg" /><h4>标题一</h4></li>
<li><img src="/photo/2.jpg" /><h4>标题二</h4></li>
<li><img src="/photo/3.jpg" /><h4>标题三</h4></li>
<li><img src="/photo/4.jpg" /><h4>标题四</h4></li>
  </ul>
</div>
注意：div的ID必须是tdSlider
调用方式：tdSlider(260,180,1,0,"/images/wait.gif",3000);
参数依次对应含意：宽；高；边框大小以像素为单位；标题位置以DIV的左上角为0,0坐标；占位图片地址（用于缓冲图片时的等待效果）；轮播时间间隔（毫秒）；