{"id":37,"date":"2009-11-10T11:26:39","date_gmt":"2009-11-10T03:26:39","guid":{"rendered":"http:\/\/www.magki.com\/blog\/?p=37"},"modified":"2009-11-17T11:51:00","modified_gmt":"2009-11-17T03:51:00","slug":"a-focus-code-based-on-jquery","status":"publish","type":"post","link":"http:\/\/www.ijony.com\/blog\/2009\/11\/a-focus-code-based-on-jquery.html","title":{"rendered":"\u521a\u5199\u7684\u4e00\u4e2a\u57fa\u4e8e JQuery \u7684\u805a\u7126\u5207\u6362\u5e7f\u544a"},"content":{"rendered":"

\u5728\u7ed9\u4e00\u4e2a\u5ba2\u6237\u505a\u7ad9\u65f6 (\u6d4b\u8bd5\u7ad9<\/a>) \u8981\u7528\u5230\u805a\u7126\u5e7f\u544a\uff0c\u7f51\u4e0a\u7b80\u5355\u641c\u4e86\u4e00\u4e0b Flash \u7248\u7684\u90fd\u4e0d\u592a\u6ee1\u610f\u90a3\u4e9b\u6837\u5f0f\uff0c\u540e\u6765\u840c\u53d1\u81ea\u5df1\u7528 JQuery \u5199\u4e00\u4e2a\u7684\u60f3\u6cd5\uff0c\u4e8e\u662f\u5c31\u505a\u4e86\uff0c\u5b9e\u73b0\u8d77\u6765\u5e76\u4e0d\u96be\uff0c\u8fd9\u91cc\u4e0d\u5f97\u4e0d\u8d5e\u53f9\u4e00\u4e0b JQuery \u7684\u5f3a\u5927\u3002<\/p>\n

HTML \u90e8\u5206<\/p>\n

<div id=”doFocus”>
\n\u00a0\u00a0\u00a0\u00a0<img src=”ad\/01.jpg” \/>
\n\u00a0\u00a0\u00a0\u00a0<img src=”ad\/02.jpg” \/>
\n\u00a0\u00a0\u00a0\u00a0<div id=”focusNav”><\/div>
\n<\/div><\/p><\/blockquote>\n

CSS \u90e8\u5206<\/p>\n

#doFocus{ position:relative; width:694px; height:172px; border:2px #FFF solid; overflow:hidden;}
\n#doFocus img{ position:absolute; width:694px; height:172px; top:0px; left:0px;}
\n#focusNav{ position:absolute; top:142px; right:10px; z-index:2; opacity:0.8; filter:Alpha(Opacity=80);}
\n#focusNav a{ display:block; float:right; width:20px; height:20px; margin-left:10px; line-height:20px; text-align:center; background:#333; color:#FFF; font-weight:bold;}
\n#focusNav .thisclass,#focusNav a:hover{ background:#fff; color:#333;}<\/p><\/blockquote>\n


\nJS \u90e8\u5206<\/p>\n

var ImgArr = $(‘#doFocus img’);
\nvar MaxImg = ImgArr.length;
\nvar NowImg = 0;
\nvar NextImg = 0;
\nvar ToImg = -1;
\nvar ImgNav = ”;
\nvar Status = 0;
\nvar t;<\/p>\n

for(i=0;i<MaxImg;i++){
\n\u00a0\u00a0\u00a0\u00a0ImgNav = ‘<a id=”imgNav’+i+'” href=”javascript:void(0)” onclick=”changeImg(‘+i+’)”>’+(i+1)+'<\/a>’ + ImgNav;
\n\u00a0\u00a0\u00a0\u00a0ImgArr.eq(i).hide();
\n\u00a0\u00a0\u00a0\u00a0ImgArr.eq(i).css(“zIndex”,”0″);
\n}<\/p>\n

ImgArr.eq(0).show();
\n$(‘#focusNav’).html(ImgNav);
\n$(‘#imgNav0’).addClass(“thisclass”);<\/p>\n

function changeImg(ImgNum){
\n\u00a0\u00a0\u00a0\u00a0if(Status == 1){
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ToImg = ImgNum;
\n\u00a0\u00a0\u00a0\u00a0}else{
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0clearTimeout(t);
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ToImg = -1;
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ImgNav = ”;
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0NowImg = ImgNum;
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(i=0;i<MaxImg;i++){
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ImgNav = ‘<a id=”imgNav’+i+'” href=”javascript:void(0)” onclick=”changeImg(‘+i+’)”>’+(i+1)+'<\/a>’ + ImgNav;
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ImgArr.eq(i).hide();
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ImgArr.eq(i).css(“zIndex”,”0″);
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ImgArr.eq(NowImg).show();
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(‘#focusNav’).html(ImgNav);
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(‘#imgNav’+NowImg).addClass(“thisclass”);<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0t = setTimeout(‘doFocus()’, 3000);
\n\u00a0\u00a0\u00a0\u00a0}
\n}<\/p>\n

function doFocus(){
\n\u00a0\u00a0\u00a0\u00a0clearTimeout(t);
\n\u00a0\u00a0\u00a0\u00a0
\n\u00a0\u00a0\u00a0\u00a0Status = 1;
\n\u00a0\u00a0\u00a0\u00a0NextImg = (NowImg + 1 == MaxImg) ? 0 : NowImg + 1 ;<\/p>\n

\u00a0\u00a0\u00a0\u00a0ImgArr.eq(NextImg).css(“zIndex”,”1″);
\n\u00a0\u00a0\u00a0\u00a0ImgArr.eq(NowImg).css(“zIndex”,”0″);<\/p>\n

\u00a0\u00a0\u00a0\u00a0ImgArr.eq(NextImg).fadeIn(“slow”,function(){
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(‘#imgNav’+NowImg).removeClass(“thisclass”);
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(‘#imgNav’+NextImg).addClass(“thisclass”);
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ImgArr.eq(NextImg).css(“zIndex”,”0″);
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ImgArr.eq(NowImg).hide();
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Status = 0;<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(ToImg>-1){
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(ToImg!=NextImg){
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ImgArr.eq(ToImg).show();
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ImgArr.eq(NextImg).hide();
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(‘#imgNav’+ToImg).addClass(“thisclass”);
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(‘#imgNav’+NextImg).removeClass(“thisclass”);
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0NowImg = ToImg;
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ToImg = -1;
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}else{
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(NowImg == MaxImg-1){
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0NowImg = 0;
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}else{
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0NowImg++;
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0t = setTimeout(‘doFocus()’, 3000);
\n\u00a0\u00a0\u00a0\u00a0});
\n}<\/p>\n

t = setTimeout(‘doFocus()’, 3000);<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

\u5728\u7ed9\u4e00\u4e2a\u5ba2\u6237\u505a\u7ad9\u65f6 (\u6d4b\u8bd5\u7ad9) \u8981\u7528\u5230\u805a\u7126\u5e7f\u544a\uff0c\u7f51\u4e0a\u7b80\u5355\u641c\u4e86\u4e00\u4e0b Flash \u7248\u7684\u90fd\u4e0d\u592a\u6ee1\u610f\u90a3\u4e9b\u6837\u5f0f\uff0c\u540e\u6765\u840c\u53d1 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[14],"_links":{"self":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts\/37"}],"collection":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":0,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts\/37\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/media?parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/categories?post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/tags?post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}