用純CSS DIV寫的漂亮Flash投影片及SQL標籤教學！
下面程式碼有點多！但做出來你一定喜歡！
用純CSS DIV寫的漂亮Flash投影片及SQL標籤教學！我不想廢話了，開門見山吧。
先看示範 ：http://www.gz7y.com 點精彩推薦即可看見！
如果下面程式碼你看不懂或做不出來，明天就等我的影片吧。
CSS如下：
<style> <BR><!-- <BR>#f_div{width:230px; height:205px; margin:0 auto; overflow:hidden; } <BR>#f_imgDiv{width:100%; height:205px; overflow:hidden;} <BR>#f_img{filter:progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); border:0;} <BR> #f_infoDiv{width:100%;top:-16px !important;top:-18px; position:relative;} <BR>#f_buttonDiv{width:100%; height:17px;overflow:hidden . } <BR>#f_line{width:100%;height:1px;background:#fff; overflow:hidden;filter:progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=50, Alpha(startX=0, startY=0, finishX=50, Alpha(startX=0, startY=0, finishX=50, ,style=1,opacity=0,finishOpacity=100)} <BR>#f_buttonDiv div{width:1px;height:17px; background:#fff; float:right;} <BR ; height:17px; background:#fff; float:right; filter:Alpha(Opacity=40);} <BR>#f_buttonDiv a{width:17px;height:11px !importantant;heighta{width:17px;height:11px !important;height:17px;f -top:5px;color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:10px; line-height:10px; text-align:center;display:block;overflow:hidden;text- decoration:none;position:absolute;} <BR>#f_buttonDiv a:link,#f_buttonDiv a:visited,#f_buttonDiv a:active{color:#000;} <BR>#f_buttonDiva:hover{color:#000;} <BR>#f_buttonDiva:hover{1/F000006; color:#fff;} <BR>#f_buttonDiv a.on:link,#f_buttonDiv a.on:visited,#f_buttonDiv a.on:active,#f_buttonDiv a.on:hover{background:#FFf0C;color:#ffff; ;} <BR>#f_buttonDiv a.on:hover{background:#FF6600;} <BR>--> <BR></style><script> <BR>var imgWidth=250; <BR>var imgHeight=205; <BR>var _timeOut_=5000; <BR>var show_text = true; //是否显示焦点文字 <BR>var timeOut=_timeOut_; <BR>var timeOut2=_timeOut_/2;//onmouseout img后需要切换的时间 <BR>var now=0; //第一张图 <BR>var target="_blank"; //打开方式 <BR>var button_on ='on'; //当前焦点对应按钮的样式名 <BR>var button_off ='';//非当前焦点对应按钮的样式名 <BR>//不可修改区域 <BR>var imgUrl = new Array(); <BR>var imgText = new Array(); <BR>var imgLink = new Array(); <BR>var imgAlt= new Array(); <BR>//var menuList = new Array();//菜单menu <BR>var ver=2; //兼容浏览器版本 默认2 为非ie <BR>var firstTime=true; <BR>var n =-1; <BR>[loop=5] <BR>imgUrl[++n]='{$Field(Picurl,Text,0,...,0,)}'; <BR>imgText[n]='<a href="{$Field(ID,GetInfoUrl,1,1)}" target="_blank" class=linkblack>{$Field(Title,Text,0,...,0,)}'; <BR>imgLink[n]='{$Field(ID,GetInfoUrl,1,1)}'; <BR>imgAlt[n]='{$Field(Title,Text,0,...,0,)}'; <BR>[/loop] <BR>var count=0; <BR>for (i=0;i<img Url.length;i++) { <BR alt="用純CSS DIV寫的漂亮Flash投影片及SQL標籤教學！ _經驗交流" >if( (imgUrl[i]!="") && (imgText[i]!="")&& (imgLink[i]!="")&& (imgAlt[i]!="")) { <BR>count++; <BR>} else { <BR>break; <BR>} <BR>} <BR>function p$(string){ <BR>document.write(string); <BR>} <BR>function $(id){ <BR>return document.getElementById(id); <BR>} <BR>//固定图片size <BR>p$("<style> #f_img { width:"+imgWidth+"px;height:"+imgHeight+"px;"); <BR>function change(){ <BR>if (ver==1){ <BR>with($('f_img').filters[0]){ <BR>Transition=1; <BR>apply(); <BR>play(); <BR>} <BR>} <BR>if (firstTime){ firstTime=false;timeOut=_timeOut_/1000;} <BR>else{ <BR>$('f_img').src=imgUrl[now]; <BR>$('f_img').alt=imgAlt[now]; <BR>$('f_imgLink').href=imgLink[now]; <BR>for (var i=0;i<count;i++) { <BR>$('b'+i).className="button"; <BR>//$('f_menu'+i).className=""; <BR>} <BR>$('b'+now).className="on"; <BR>//$('f_menu'+now).className="on"; <BR>now=(now>=imgUrl.length-1)?0:now+1; <BR>timeOut=_timeOut_; <BR>} <BR>theTimer=setTimeout("change()", timeOut); <BR>} <BR>function b_change(num){ <BR>window.clearInterval(theTimer); <BR>now=num; <BR>firstTime=false; <BR>change(); <BR>} <BR>//draw 渐变line （即css:f_line) <BR>function draw_line(){ <BR>var div = document.createElement("div"); <BR>div.id = 'f_line'; <BR>$('f_infoDiv').insertBefore(div,$('f_infoDiv').childNodes.item(0)); <BR>} <BR>//表现层 start <BR>//图片 <BR>var a = document.createElement("a"); <BR>a.id="f_imgLink"; <BR>a.target=target; <BR>a.href=imgLink[now]; <BR>$('f_imgDiv').appendChild(a); <BR>var img = document.createElement("img"); <BR>img.id="f_img"; <BR>img.width=imgWidth; <BR>img.height=imgHeight; <BR>img.src=imgUrl[now]; <BR>img.alt=imgAlt[now]; <BR>a.appendChild(img); <BR>//数字按钮 <BR>for (var i=count-1;i>=0;i--){ <BR>var div_bg = document.createElement("div"); <BR>div_bg.id = 'div_bg'+i; <BR>div_bg.className='bg'; <BR>$('f_buttonDiv').appendChild(div_bg); <BR>var a = document.createElement("a"); <BR>a.id = 'b'+i; <BR>a.className = (i==now+1)?"button_on":"button_off"; <BR>a.title=imgAlt[i]; <BR>a.innerHTML=i+1; <BR>a.href='javascript:b_change('+i+')'; <BR>$('div_bg'+i).appendChild(a); <BR>var div= document.createElement("div"); <BR>$('f_buttonDiv').appendChild(div); <BR>} <BR>//表现层 end <BR>$('f_img').onmouseover=function(){window.clearInterval(theTimer);} <BR>$('f_img').onmouseout=function(){theTimer=setTimeout("change()", timeOut2);} <BR>try{ //滤镜版本 <BR>new ActiveXObject("DXImageTransform.Microsoft.Fade"); <BR>$('f_img').filters[0].play(); <BR>ver=1; <BR>draw_line(); <BR>} <BR>catch (e){ver=2;} <BR>var theTimer = setTimeout("change()", _timeOut_/1000); <BR></script> 
