jquery制作多功能轮播图插件
这是一款多功能幻灯片插件，支持多种配置，css样式是扒的网上的，里面的代码原创，轻喷~
;(function($){
"usestrict";
varmethods={
o:{
next:"#cycle-next",
prev:"#cycle-prev",
pager:"#cycle-nav",
slider:"#beauty-slider",
timeLine:"#timeLine",
innerTimeLine:"#inner-timeLine",
timeLineNode:"#timeLine-node",
sliderItemClass:"sliderItem",
nodeActive:"node_active",
displays:{fade:"fade",left:"left",right:"right",top:"top",bottom:"bottom"},
navHtml:"<ahref='javascript:;'class='&'>?</a>",
navConfig:{navBoxClass:"cycle-nav",navActiveClass:"activeSlide",showNum:true}
},
generateId:function(){
return"-"+newDate().getTime();
},
generateTemplate:function(id,settings){
varhtmls=newArray();
htmls.push('<divclass="slider-wrap">');
htmls.push('<divclass="cycleslider-wrap">');
htmls.push('<divid="beauty-slider'+id+'"class="cycleslider"></div>');
if(settings.isArrow){
htmls.push('<aid="cycle-prev'+id+'"class="cycle-prev"href="javascript:;"title="试试左方向键翻页">Prev</a>');
htmls.push('<aid="cycle-next'+id+'"class="cycle-next"href="javascript:;"title="试试右方向键翻页">Next</a>');
}
if(settings.showTimeLine){
htmls.push('<divclass="timeLine"id="timeLine'+id+'">');
htmls.push('<divclass="innerTimeLine"id="inner-timeLine'+id+'"style="width:0px;"> </div>');
htmls.push('<divid="timeLine-node'+id+'"></div>');
htmls.push('</div>');
}
if(settings.isNav){
htmls.push('<divid="cycle-nav'+id+'"class="cycle-nav"></div>');
}
htmls.push('</div>');
htmls.push('<divclass="loader"></div>');
htmls.push('</div>');
returnhtmls;
},
init:function(dom,options){
vars=this;
vardefaults={url:"",data:{},auto:false,time:2000,overLay:false,isArrow:true,isNav:true,showTimeLine:false,showTip:false,keyboard:true,display:s.o.displays.fade,navConfig:s.o.navConfig};
varsettings=$.extend({},defaults,options);
varid=s.generateId();
$(".slider-wrap.loader").show();
varimgArray=s.returnImgArray(dom,settings);
if(imgArray!=null&&imgArray.length>0){
s["imgcnt"+id]=imgArray.length;
$(dom).html(s.generateTemplate(id,settings).join('')).show();
varslider=$(s.o.slider+id);
varpager=$(s.o.pager+id);
vartimeLineNode=$(s.o.timeLineNode+id);
s.o.innerW=$(dom).width()-20;
varimgHtml="";
varpageHtml="";
vartimeHtml="";
$.each(imgArray,function(index,item){
varpicClass=index==0?s.o.sliderItemClass:s.o.sliderItemClass+"none";
varnavClass=index==0?settings.navConfig.navActiveClass:"";
imgHtml+='<divclass="'+picClass+'"><ahref="'+(s.isParamValid(item.picUrl)?item.picUrl:"javascript:;")+'"><imgsrc="'+item.picPath+'"width="'+item.width+'"height="'+item.height+'"title="'+item.title+'"/></a></div>';
pageHtml+=s.o.navHtml.replace("?",settings.navConfig.showNum?index+1:"").replace("&",navClass);
varleft=s.o.innerW*index/s["imgcnt"+id]-13;
varnodeClass=index==0?s.o.nodeActive:"";
timeHtml+='<divclass="node'+nodeClass+'"style="left:'+left+'px;">';
if(settings.showTip){
timeHtml+='<divclass="tooltip">'+item.title+'</div>';
}
timeHtml+='</div>';
});
slider.html(imgHtml);
if(settings.isNav){
if(settings.navConfig.navBoxClass){
pager.removeClass(s.o.navConfig.navBoxClass).addClass(settings.navConfig.navBoxClass);
}
pager.html(pageHtml);
}
if(settings.showTimeLine){
timeLineNode.html(timeHtml);
}
slider.width(s.o.innerW);
slider.find("."+s.o.sliderItemClass).width(s.o.innerW);
$(s.o.timeLine+id).width(s.o.innerW);
if(settings.overLay){
if($.fn.layerModel){
$(dom).layerModel({staySame:true,blurClose:true});
}else{
alert("请先引入layerModel插件!");
}
}
s.initBind(id,settings);
s["currentIndex"+id]=0;
vartotalTime=settings.time/1000*s["imgcnt"+id];
if(settings.auto){
if(settings.showTimeLine){
s.startTimeLine(id,totalTime,settings);
}else{
s.o.timeInterval=window.setInterval(function(){
$("#cycle-next"+id).click();
},settings.time);
}
}
}else{
return;
}
returndom;
},
startTimeLine:function(id,time,settings){
vars=this;
var$innerTimeLine=$(s.o.innerTimeLine+id);
varcrnW=$innerTimeLine.width();
for(vari=0;i<s["imgcnt"+id];i++){
varautoW=Math.floor(s.o.innerW*i/s["imgcnt"+id]);
if(crnW==autoW){
s["currentIndex"+id]=i;
s.updateImgLink(id,settings);
$(s.o.timeLineNode+id).find("div.node").eq(i).addClass(s.o.nodeActive).siblings().removeClass(s.o.nodeActive);
}
}
if(crnW<s.o.innerW){
$innerTimeLine.animate({width:"+=1px"},time,'linear',function(){
s.startTimeLine(id,time,settings);
});
}else{
$innerTimeLine.width(0);
s.startTimeLine(id,time,settings);
}
},
initBind:function(id,settings){
vars=this;
varisEasing=$.easing.def;
if(settings.isArrow){
$("#cycle-prev"+id+",#cycle-next"+id).css({opacity:"0"});
$(".cycleslider-wrap").hover(function(){
$("#cycle-prev"+id).stop().animate({left:"-31",opacity:"1"},200,isEasing?"easeOutCubic":"");
$("#cycle-next"+id).stop().animate({right:"-31",opacity:"1"},200,isEasing?"easeOutCubic":"");
},function(){
$("#cycle-prev"+id).stop().animate({left:"-50",opacity:"0"},400,isEasing?"easeInCubic":"");
$("#cycle-next"+id).stop().animate({right:"-50",opacity:"0"},400,isEasing?"easeInCubic":"");
});
$("#cycle-prev"+id).bind("click",function(){
s["currentIndex"+id]=s["currentIndex"+id]<=0?s["imgcnt"+id]-1:s["currentIndex"+id]-1;
s.updateImgLink(id,settings);
});
$("#cycle-next"+id).bind("click",function(){
s["currentIndex"+id]=s["currentIndex"+id]<s["imgcnt"+id]-1?s["currentIndex"+id]+1:0;
s.updateImgLink(id,settings);
});
}
$(".slider-wrap.loader").hide();
$("a",s.o.pager+id).bind("click",function(){
if($(this).hasClass(s.o.navConfig.navActiveClass)){
returnfalse;
}
s["currentIndex"+id]=$(this).index();
s.updateImgLink(id,settings);
});
if(settings.auto&&settings.showTimeLine){
$("div.node",s.o.timeLineNode+id).bind({
click:function(){
if($(this).hasClass(s.o.nodeActive)){
returnfalse;
}
s["currentIndex"+id]=$(this).index();
s.updateImgLink(id,settings);
},
mouseover:function(){
if(settings.showTip){
$(this).find(".tooltip").fadeIn();
}
},
mouseout:function(){
if(settings.showTip){
$(this).find(".tooltip").fadeOut();
}
}
});
}
//键盘操作
if(settings.keyboard){
$(window).keydown(function(event){
//<---
if(event.keyCode==37){
$("#cycle-prev"+id).click();
}
//--->
if(event.keyCode==39){
$("#cycle-next"+id).click();
}
});
}
},
updateImgLink:function(id,settings){
vars=this;
varindex=s["currentIndex"+id];
vardisplay=settings.display;
varisEasing=$.easing.def;
var$items=$("div."+s.o.sliderItemClass,s.o.slider+id);
switch(display){
cases.o.displays.fade:
$items.eq(index).show().siblings().hide();
break;
cases.o.displays.left:
$items.css({position:"absolute",top:0,left:s.o.innerW}).hide();
$items.eq(index).animate({left:0},100,isEasing?"easeOutCubic":"").show();
$(s.o.slider+id).height(s.getImgMaxHeight(id));
break;
cases.o.displays.right:
$items.css({position:"absolute",top:0,right:s.o.innerW}).hide();
$items.eq(index).animate({right:0},100,isEasing?"easeOutCubic":"").show();
$(s.o.slider+id).height(s.getImgMaxHeight(id));
break;
cases.o.displays.top:
break;
cases.o.displays.bottom:
break;
default:
break;
}
$("a",s.o.pager+id).eq(index).addClass(settings.navConfig.navActiveClass).siblings().removeClass(settings.navConfig.navActiveClass);
//更新进度条的信息
if(settings.auto&&settings.showTimeLine){
varindexWidth=Math.floor(s.o.innerW*index/s["imgcnt"+id]);
$(s.o.innerTimeLine+id).animate({width:indexWidth+"px"},500,'linear',function(){
$(s.o.timeLineNode+id).find("div.node").eq(index).addClass(s.o.nodeActive).siblings().removeClass(s.o.nodeActive);
});
}
},
getImgMaxHeight:function(id){
vars=this;
varslider=$(s.o.slider+id);
varmaxHeight=0;
$.each(slider.find("img"),function(index,item){
varimgHeight=this.height;
maxHeight=Math.max(maxHeight,imgHeight);
});
returnmaxHeight;
},
returnImgArray:function(dom,settings){
vars=this;
varimgArray=newArray();
varurl=settings.url;
if(s.isParamValid(url)){
$.ajax({
url:url+"?t="+newDate().getTime(),
type:'POST',
async:false,
data:settings.data,
dataType:'json',
success:function(data){
if(s.isParamValid(data)){
$.each(data,function(index,item){
imgArray.push(item);
});
}
},
error:function(){
alert("图片数据源地址无效...");
returnnull;
},
complete:function(XHR,TS){XHR=null;}
});
}else{
varimgs=$(dom).find("img");
if(imgs!=null&&imgs.length>0){
$.each(imgs,function(i,o){
varpic=newObject();
pic.picUrl=$(o).parent("a").attr("href");
pic.picPath=$(o).attr("src");
pic.width=$(o).attr("width");
pic.height=$(o).attr("height");
pic.title=$(o).attr("title");
imgArray.push(pic);
});
}
}
returnimgArray;
},
isParamValid:function(v){
return!(v==""||v==null||v==undefined);
}
};
$.fn.beautyFocus=function(options){
returnthis.each(function(index,item){
methods.init(item,options);
});
};
})(jQuery);
以上所述就是本文的全部内容了，希望大家能够喜欢。