插件描述：jQuery图片轮播(焦点图)插件jquery.slideBox兼容IE6+，Chrome，Firefox，Opera，safari，可左右，可上下，可快可慢，可指定默认显示第N张，自由设定，代码简洁，运行效率高
jQuery图片轮播(焦点图)插件jquery.slideBox
特点：兼容IE6+，Chrome，Firefox，Opera，safari，可左右，可上下，可快可慢，可指定默认显示第N张，自由设定，代码简洁，运行效率高，用户体验良好:)注意：关于很多网友提到的时间间隔错乱的bug已经解决。-11-21日更新
css@charset"utf-8";
html,body{font-family:"微软雅黑"}
div.slideBox{position:relative;width:670px;height:300px;overflow:hidden;}
div.slideBoxul.items{position:absolute;float:left;background:none;list-style:none;padding:0px;margin:0px;}
div.slideBoxul.itemsli{float:left;background:none;list-style:none;padding:0px;margin:0px;}
div.slideBoxul.itemslia{float:left;line-height:normal!important;padding:0px!important;border:none/*ForIE.ADD.JENA.06300844*/;}
div.slideBoxul.itemsliaimg{margin:0px!important;padding:0px!important;display:block;border:none/*ForIE.ADD.JENA.06300844*/;}
div.slideBoxdiv.tips{position:absolute;bottom:0px;width:100%;height:50px;background-color:#000;overflow:hidden;}
div.slideBoxdiv.tipsdiv.title{position:absolute;left:0px;top:0px;height:100%;}
div.slideBoxdiv.tipsdiv.titlea{color:#FFF;font-size:18px;line-height:50px;margin-left:10px;text-decoration:none;}
div.slideBoxdiv.tipsdiv.titlea:hover{text-decoration:underline!important;}
div.slideBoxdiv.tipsdiv.nums{position:absolute;right:0px;top:0px;height:100%;}
div.slideBoxdiv.tipsdiv.numsa{display:inline-block;>float:left/*ForIE.ADD.JENA.06300844*/;width:20px;height:20px;background-color:#FFF;text-indent:-99999px;margin:15px10px0px0px;}
div.slideBoxdiv.tipsdiv.numsa.active{background-color:#093;}
js(function($){
$.fn.slideBox=function(options){
//默认参数
vardefaults={
direction:'left',//left,top
duration:0.6,//unit:seconds
easing:'swing',//swing,linear
delay:3,//unit:seconds
startIndex:0,
hideClickBar:true,
clickBarRadius:5,//unit:px
hideBottomBar:false,
width:null,
height:null
};
varsettings=$.extend(defaults,options||{});
//计算相关数据
varwrapper=$(this),ul=wrapper.children('ul.items'),lis=ul.find('li'),firstPic=lis.first().find('img');
varli_num=lis.size(),li_height=0,li_width=0;
//定义滚动顺序:ASC/DESC.ADD.JENA.08081718
varorder_by='ASC';
//初始化
varinit=function(){
if(!wrapper.size())returnfalse;
//手动设定值优先.ADD.JENA.03141309
li_height=settings.height?settings.height:lis.first().height();
li_width=settings.width?settings.width:lis.first().width();
wrapper.css({width:li_width+'px',height:li_height+'px'});
lis.css({width:li_width+'px',height:li_height+'px'});//ADD.JENA.07051027
if(settings.direction=='left'){
ul.css('width',li_num*li_width+'px');
}else{
ul.css('height',li_num*li_height+'px');
}
ul.find('li:eq('+settings.startIndex+')').addClass('active');
if(!settings.hideBottomBar){//ADD.JENA.08090859
vartips=$('
vartitle=$('
varactive=ul.find('li.active').find('a'),text=active.attr('title'),href=active.attr('href');
return$('').attr('href',href).text(text);
}).appendTo(tips);
varnums=$('
lis.each(function(i,n){
vara=$(n).find('a'),text=a.attr('title'),href=a.attr('href'),css='';
i==settings.startIndex&&(css='active');
$('').attr('href',href).text(text).addClass(css).css('borderRadius',settings.clickBarRadius+'px').mouseover(function(){
$(this).addClass('active').siblings().removeClass('active');
ul.find('li:eq('+$(this).index()+')').addClass('active').siblings().removeClass('active');
start();
stop();
}).appendTo(nums);
});
if(settings.hideClickBar){//ADD.JENA.06300847
tips.hover(function(){
nums.animate({top:'0px'},'fast');
},function(){
nums.animate({top:tips.height()+'px'},'fast');
});
nums.show().delay(2000).animate({top:tips.height()+'px'},'fast');
}else{
nums.show();
}
}
lis.size()>1&&start();
}
//开始轮播
varstart=function(){
varactive=ul.find('li.active'),active_a=active.find('a');
varindex=active.index();
if(settings.direction=='left'){
offset=index*li_width*-1;
param={'left':offset+'px'};
}else{
offset=index*li_height*-1;
param={'top':offset+'px'};
}
wrapper.find('.nums').find('a:eq('+index+')').addClass('active').siblings().removeClass('active');
wrapper.find('.title').find('a').attr('href',active_a.attr('href')).text(active_a.attr('title'));
ul.stop().animate(param,settings.duration*1000,settings.easing,function(){
active.removeClass('active');
if(order_by=='ASC'){
if(active.next().size()){
active.next().addClass('active');
}else{
order_by='DESC';
active.prev().addClass('active');
}
}elseif(order_by=='DESC'){
if(active.prev().size()){
active.prev().addClass('active');
}else{
order_by='ASC';
active.next().addClass('active');
}
}
});
wrapper.data('timeid',window.setTimeout(start,settings.delay*1000));
};
//停止轮播
varstop=function(){
window.clearTimeout(wrapper.data('timeid'));
};
//鼠标经过事件
wrapper.hover(function(){
stop();
},function(){
wrapper.data('timeid', window.setTimeout(start, settings.delay*1000))
});
//首张图片加载完毕后执行初始化
varimgLoader=newImage();
imgLoader.onload=function(){
imgLoader.onload=null;
init();
}
imgLoader.src=firstPic.attr('src');
};
})(jQuery);
html
