/** * ��ӭʹ�� kinslideshow �õ�ƭ������ͼ����� * * jquery kinslideshow plugin * ========================================��˵����======================================================== * jquery�õ�ƭ���������������������ҳ��ʹ�ûõ�ƭ(����ͼ)ч��������ie6/ie7/ie8/ie9,firefox,chrome,opera�� * ʹ�ü��䷽�㡢�򵥣������ʽ�����զ���,���嶨����ʽ��������������������μ�demo�ļ� * ������img��ǩ���� ����ͼƭ�ŀ�ⱥ͸߶� �է�ֹ����̫�� js��ȡ����ͼƭ��ʵ����� * ���п�ⱥ͸߶ȵ�λ�������أ����ò���ʱ����ҫ�ӵ�λ(px) * ��kinslideshow 1.2 ������ͬһҳ����ʹ�ö��kinslideshowч����2010-09-15�� * ��kinslideshow 1.2.1 �޸���ie8����ģʽ�� ���ⲻ�л������⣬ҳ����ie�ں���������磺���σ�qq�����5����ie8�����²��л������⡾2010-11-01�����޸������ñ������͸��������ҳ��̳�͸�������⡣ * ======================================================================================================== * @name jquery.kinslideshow.js * @version 1.2.1 * @author mr.kin * @date 2010-11-01 * @email:mr.kin@foxmail.com * * ����ȡ���°汾kinslideshow���dz���bug���뷢��email�� ��mr.kin@foxmail.com�� * ��ʵ��ӧ��ʱ����ɾ���˶�ע�͡� **/ (function($) { $.fn.kinslideshow = function(settings){ settings = jquery.extend({ intervaltime : 5,//���ü��ʱ��ϊ5�� ����λ���롿 [ĭ��ϊ5��] movespeedtime : 400,//�л�һ��ͼƭ����ʱ�䣬����λ�����롿[ĭ��ϊ400����] movestyle:"down",//�л����� ��ѡֵ���� left | right | up | down ��left:�����л�,right:�����л�,up:�����л�,down:�����л� [ĭ�������л�] mouseevent:"mouseclick",//��������ť�¼�,��ѡֵ����mouseclick | mouseover��mouseclick����굥���л���mouseover����껬���л���[ĭ��ϊ�������ť�л�] ishastitlebar:true,//�ƿ���ʾ���ⱳ�� ��ѡֵ���� true | false ��[ĭ��ϊtrue] titlebar:{titlebar_height:32,titlebar_bgcolor:"#000000",titlebar_alpha:0.5},//���ⱳ����ʽ��(ishastitlebar = true ǰ��������) ishastitlefont:true,//�ƿ���ʾ�������� ��ѡֵ���� true | false ��[ĭ��ϊtrue] titlefont:{titlefont_size:12,titlefont_color:"#ffffff",titlefont_family:"verdana",titlefont_weight:"bold"},//����������ʽ��(ishastitlefont = true ǰ��������) ishasbtn:true,//�ƿ���ʾ��ť btn:{btn_bgcolor:"transparent",btn_bghovercolor:"transparent",btn_fontcolor:"transparent",btn_fonthovercolor:"transparent",btn_fontfamily:"verdana",btn_bordercolor:"transparent",btn_borderhovercolor:"transparent",btn_borderwidth:1,btn_bgalpha:1}//��ť��ʽ���ã�(ishasbtn = true ǰ��������) },settings); var titlebar_bak = {titlebar_height:32,titlebar_bgcolor:"#000000",titlebar_alpha:0.5} var titlefont_bak = {titlefont_size:12,titlefont_color:"#ffffff",titlefont_family:"verdana",titlefont_weight:"bold"} var btn_bak = {btn_bgcolor:"#666666",btn_bghovercolor:"#cc0000",btn_fontcolor:"#cccccc",btn_fonthovercolor:"#000000",btn_fontfamily:"verdana",btn_bordercolor:"#999999",btn_borderhovercolor:"#ff0000",btn_borderwidth:1,btn_bgalpha:0.7} for (var key in titlebar_bak){ if(settings.titlebar[key] == undefined){ settings.titlebar[key] = titlebar_bak[key]; } } for (var key in titlefont_bak){ if(settings.titlefont[key] == undefined){ settings.titlefont[key] = titlefont_bak[key]; } } for (var key in btn_bak){ if(settings.btn[key] == undefined){ settings.btn[key] = btn_bak[key]; } } var ksthis = this; var ksbs = $(ksthis).selector; var kss_datearray = new array(); var kss_imgaelength = 0; var kss_size =new array(); var kss_changeflag = 0; var kss_intervaltime = settings.intervaltime; var kss_setinterval; var kss_firstmoveflag = true; var gettitlebar_height; if(isnan(kss_intervaltime) || kss_intervaltime <= 1){ kss_intervaltime = 5; } if(settings.movespeedtime > 500){ settings.movespeedtime = 500; }else if(settings.movespeedtime < 100){ settings.movespeedtime = 100; } function kss_initialize(){ $(ksthis).css({visibility:"hidden"}); $(ksbs+" a img").css({border:0}); kss_start(); kss_mousehover(); }; function kss_start(){ kss_imgaelength = $(ksbs+" a").length; kss_size.push($(ksbs+" a img").width()); kss_size.push($(ksbs+" a img").height()); $(ksbs+" a img").each(function(i){ kss_datearray.push($(this).attr("alt")); }); $(ksbs+" a").wrapall("
"); $(ksbs).find("#kss_content").clone().attr("id","kss_contentclone").appendto(ksthis); kss_settitlebar(); kss_settitlefont(); kss_setbtn(); kss_action(); kss_btnevent(settings.mouseevent); $(ksthis).css({visibility:"visible"}); }; function kss_settitlebar(){ $(ksthis).css({width:kss_size[0],height:kss_size[1],overflow:"hidden",position:"relative"}); $(ksthis).append("
"); gettitlebar_height = settings.titlebar.titlebar_height; if(isnan(gettitlebar_height)){ gettitlebar_height = 40; }else if(gettitlebar_height < 25){ gettitlebar_height = 25; } $(ksbs+" .kss_titlebar").css({height:gettitlebar_height,width:980,position:"absolute",bottom:0,left:10}) if(settings.ishastitlebar){ $(ksbs+" .kss_titlebar").css({background:settings.titlebar.titlebar_bgcolor,opacity:settings.titlebar.titlebar_alpha}) } }; function kss_settitlefont(){ if(settings.ishastitlefont){ $(ksthis).append("

"); $(ksbs+" .kss_titlebox").css({height:gettitlebar_height,width:"100%",position:"absolute",bottom:-6,left:15}) $(ksbs+" .kss_titlebox h2").css({fontsize:settings.titlefont.titlefont_size,color:settings.titlefont.titlefont_color,fontfamily:settings.titlefont.titlefont_family,fontweight:settings.titlefont.titlefont_weight}); settiltfontshow(0); }; }; function kss_setbtn(){ if(settings.btn.btn_borderwidth > 2){settings.btn.btn_borderwidth = 2} if(settings.btn.btn_borderwidth < 0 || isnan(settings.btn.btn_borderwidth)){settings.btn.btn_borderwidth = 0} if(settings.ishasbtn && kss_imgaelength >= 2){ $(ksthis).append("
"); var kss_btnlist = ""; for(i=1;i<=kss_imgaelength;i++){ kss_btnlist+="
  •  
  • "; } kss_btnlist = ""; $(ksbs+" .kss_btnbox").append(kss_btnlist); $(ksbs+" .kss_btnbox #btnlistid li").css({liststyle:"none",float:"left",width:10,height:10,background:"url('/cn/images/i2.png') no-repeat scroll center center "+settings.btn.btn_bgcolor, borderwidth:settings.btn.btn_borderwidth,bordercolor:settings.btn.btn_bordercolor,borderstyle:"none",textalign:"center",cursor:"pointer",marginleft:5,fontsize:0,fontfamily:settings.btn.btn_fontfamily,lineheight:"8px",color:settings.btn.btn_fontcolor}); $(ksbs+" #btnlistid li:eq(0)").css({background:"url('/cn/images/i1.png') no-repeat scroll center center "+settings.btn.btn_bghovercolor,bordercolor:settings.btn.btn_borderhovercolor,color:settings.btn.btn_fonthovercolor}); }; }; function kss_action(){ switch(settings.movestyle){ case "left": kss_moveleft(); break; case "right": kss_moveright();break; case "up": kss_moveup(); break; case "down": kss_movedown(); break; default: settings.movestyle = "left"; kss_moveleft(); } }; function kss_moveleft(){ $(ksbs+" div:lt(2)").wrapall("
    "); $(ksbs).find("#kss_movebox").css({width:kss_size[0],height:kss_size[1],overflow:"hidden",position:"relative"}); $(ksbs).find("#kss_content").css({float:"left"}); $(ksbs).find("#kss_contentclone").css({float:"left"}); $(ksbs+" #kss_movebox div").wrapall("
    "); $(ksbs).find("#kss_xposbox").css({float:"left",width:"2000%"}); kss_setinterval = setinterval(function(){kss_move(settings.movestyle)},kss_intervaltime*1000+settings.movespeedtime); }; function kss_moveright(){ $(ksbs+" div:lt(2)").wrapall("
    "); $(ksbs).find("#kss_movebox").css({width:kss_size[0],height:kss_size[1],overflow:"hidden",position:"relative"}); $(ksbs).find("#kss_content").css({float:"left"}); $(ksbs).find("#kss_contentclone").css({float:"left"}); $(ksbs+" #kss_movebox div").wrapall("
    "); $(ksbs).find("#kss_xposbox").css({float:"left",width:"2000%"}); $(ksbs).find("#kss_contentclone").html(""); $(ksbs+" #kss_content a").wrap("") $(ksbs+" #kss_content a").each(function(i){ $(ksbs).find("#kss_contentclone").prepend($(ksbs+" #kss_content span:eq("+i+")").html()); }) $(ksbs).find("#kss_content").html($(ksbs).find("#kss_contentclone").html()); var kss_offsetleft = (kss_imgaelength-1)*kss_size[0]; $(ksbs).find("#kss_movebox").scrollleft(kss_offsetleft); kss_setinterval = setinterval(function(){kss_move(settings.movestyle)},kss_intervaltime*1000+settings.movespeedtime); }; function kss_moveup(){ $(ksbs+" div:lt(2)").wrapall("
    "); $(ksbs).find("#kss_movebox").css({width:kss_size[0],height:kss_size[1],overflow:"hidden",position:"relative"}); $(ksbs).find("#kss_movebox").animate({scrolltop: 0}, 1); kss_setinterval = setinterval(function(){kss_move(settings.movestyle)},kss_intervaltime*1000+settings.movespeedtime); }; function kss_movedown(){ $(ksbs+" div:lt(2)").wrapall("
    "); $(ksbs).find("#kss_movebox").css({width:kss_size[0],height:kss_size[1],overflow:"hidden",position:"relative"}); $(ksbs).find("#kss_contentclone").html(""); $(ksbs+" #kss_content a").wrap("") $(ksbs+" #kss_content a").each(function(i){ $(ksbs).find("#kss_contentclone").prepend($(ksbs+" #kss_content span:eq("+i+")").html()); }) $(ksbs).find("#kss_content").html($(ksbs).find("#kss_contentclone").html()); var kss_offsettop = (kss_imgaelength-1)*kss_size[1]; $(ksbs).find("#kss_movebox").animate({scrolltop: kss_offsettop}, 1); kss_setinterval = setinterval(function(){kss_move(settings.movestyle)},kss_intervaltime*1000+settings.movespeedtime); }; function kss_move(style){ switch(style){ case "left": if(kss_changeflag >= kss_imgaelength){ kss_changeflag = 0; $(ksbs).find("#kss_movebox").scrollleft(0); $(ksbs).find("#kss_movebox").animate({scrollleft:kss_size[0]}, settings.movespeedtime); }else{ sp =(kss_changeflag+1)*kss_size[0]; if ($(ksbs).find("#kss_movebox").is(':animated')){ $(ksbs).find("#kss_movebox").stop(); $(ksbs).find("#kss_movebox").animate({scrollleft: sp}, settings.movespeedtime); }else{ $(ksbs).find("#kss_movebox").animate({scrollleft: sp}, settings.movespeedtime); } } settiltfontshow(kss_changeflag+1); break; case "right": var kss_offsetleft = (kss_imgaelength-1)*kss_size[0]; if(kss_changeflag >= kss_imgaelength){ kss_changeflag = 0; $(ksbs).find("#kss_movebox").scrollleft(kss_offsetleft+kss_size[0]); $(ksbs).find("#kss_movebox").animate({scrollleft:kss_offsetleft}, settings.movespeedtime); }else{ if(kss_firstmoveflag){ kss_changeflag++; kss_firstmoveflag = false; } sp =kss_offsetleft-(kss_changeflag*kss_size[0]); if ($(ksbs).find("#kss_movebox").is(':animated')){ $(ksbs).find("#kss_movebox").stop(); $(ksbs).find("#kss_movebox").animate({scrollleft: sp}, settings.movespeedtime); }else{ $(ksbs).find("#kss_movebox").animate({scrollleft: sp}, settings.movespeedtime); } } settiltfontshow(kss_changeflag); break; case "up": if(kss_changeflag >= kss_imgaelength){ kss_changeflag = 0; $(ksbs).find("#kss_movebox").scrolltop(0); $(ksbs).find("#kss_movebox").animate({scrolltop:kss_size[1]}, settings.movespeedtime); }else{ sp =(kss_changeflag+1)*kss_size[1]; if ($(ksbs).find("#kss_movebox").is(':animated')){ $(ksbs).find("#kss_movebox").stop(); $(ksbs).find("#kss_movebox").animate({scrolltop: sp}, settings.movespeedtime); }else{ $(ksbs).find("#kss_movebox").animate({scrolltop: sp}, settings.movespeedtime); } } settiltfontshow(kss_changeflag+1); break; case "down": var kss_offsetleft = (kss_imgaelength-1)*kss_size[1]; if(kss_changeflag >= kss_imgaelength){ kss_changeflag = 0; $(ksbs).find("#kss_movebox").scrolltop(kss_offsetleft+kss_size[1]); $(ksbs).find("#kss_movebox").animate({scrolltop:kss_offsetleft}, settings.movespeedtime); }else{ if(kss_firstmoveflag){ kss_changeflag++; kss_firstmoveflag = false; } sp =kss_offsetleft-(kss_changeflag*kss_size[1]); if ($(ksbs).find("#kss_movebox").is(':animated')){ $(ksbs).find("#kss_movebox").stop(); $(ksbs).find("#kss_movebox").animate({scrolltop: sp}, settings.movespeedtime); }else{ $(ksbs).find("#kss_movebox").animate({scrolltop: sp}, settings.movespeedtime); } } settiltfontshow(kss_changeflag); break; } kss_changeflag++; } function settiltfontshow(index){ if(index == kss_imgaelength){index = 0}; if(settings.ishastitlefont){ $(ksbs+" .kss_titlebox h2.title").html(kss_datearray[index]); }; $(ksbs+" #btnlistid li").each(function(i){ if(i == index){ $(this).css({background:"url('/cn/images/i1.png') no-repeat scroll center center "+settings.btn.btn_bghovercolor,bordercolor:settings.btn.btn_borderhovercolor,color:settings.btn.btn_fonthovercolor}); }else{ $(this).css({background:"url('/cn/images/i2.png') no-repeat scroll center center "+settings.btn.btn_bgcolor,bordercolor:settings.btn.btn_bordercolor,color:settings.btn.btn_fontcolor}); } }) }; function kss_btnevent(event){ switch(event){ case "mouseover" : kss_btnmouseover(); break; case "mouseclick" : kss_btnmouseclick(); break; default : kss_btnmouseclick(); } }; function kss_btnmouseover(){ $(ksbs+" #btnlistid li").mouseover(function(){ var curliindex = $(ksbs+" #btnlistid li").index($(this)); switch(settings.movestyle){ case "left" : kss_changeflag = curliindex-1; break; case "right" : if(kss_firstmoveflag){ kss_changeflag = curliindex-1; break; }else{ kss_changeflag = curliindex; break; } case "up" : kss_changeflag = curliindex-1; break; case "down" : if(kss_firstmoveflag){ kss_changeflag = curliindex-1; break; }else{ kss_changeflag = curliindex; break; } } kss_move(settings.movestyle); $(ksbs+" #btnlistid li").each(function(i){ if(i ==curliindex){ $(this).css({background:settings.btn.btn_bghovercolor,bordercolor:settings.btn.btn_borderhovercolor,color:settings.btn.btn_fonthovercolor}); }else{ $(this).css({background:settings.btn.btn_bgcolor,bordercolor:settings.btn.btn_bordercolor,color:settings.btn.btn_fontcolor}); } }) }) }; function kss_btnmouseclick(){ $(ksbs+" #btnlistid li").click(function(){ var curliindex = $(ksbs+" #btnlistid li").index($(this)); switch(settings.movestyle){ case "left" : kss_changeflag = curliindex-1; break; case "right" : if(kss_firstmoveflag){ kss_changeflag = curliindex-1; break; }else{ kss_changeflag = curliindex; break; } case "up" : kss_changeflag = curliindex-1; break; case "down" : if(kss_firstmoveflag){ kss_changeflag = curliindex-1; break; }else{ kss_changeflag = curliindex; break; } }; kss_move(settings.movestyle); $(ksbs+" #btnlistid li").each(function(i){ if(i ==curliindex){ $(this).css({background:"url('/cn/images/i1.png') no-repeat scroll center center "+settings.btn.btn_bghovercolor,bordercolor:settings.btn.btn_borderhovercolor,color:settings.btn.btn_fonthovercolor}); }else{ $(this).css({background:"url('/cn/images/i2.png') no-repeat scroll center center "+settings.btn.btn_bgcolor,bordercolor:settings.btn.btn_bordercolor,color:settings.btn.btn_fontcolor}); } }) }) }; function kss_mousehover(){ $(ksbs+" #btnlistid li").mouseover(function(){ clearinterval(kss_setinterval); }) $(ksbs+" #btnlistid li").mouseout(function(){ kss_setinterval = setinterval(function(){kss_move(settings.movestyle)},kss_intervaltime*1000+settings.movespeedtime); }) }; return kss_initialize(); }; })(jquery);