用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程！_经验交流

用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程！

下面代码有点多！但做出来你肯定喜欢！

用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程！我不想废话了，开门见山吧。

先看演示 ：http://www.gz7y.com   点精彩推荐即可看见！

如果下面代码你看不懂或者做不出来，明天等待我的视频吧。

CSS如下：
#f_buttonDiv .bg{width:17px; height:17px; background:#fff; float:right; filter:Alpha(Opacity=40);}
#f_buttonDiv a{width:17px;height:11px !important;height:17px;float:right;padding-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;}

#f_buttonDiv a:link,#f_buttonDiv a:visited,#f_buttonDiv a:active{color:#000;}

#f_buttonDiv a:hover{background:#FF840C;color:#fff;}
#f_buttonDiv a.on:link,#f_buttonDiv a.on:visited,#f_buttonDiv a.on:active,#f_buttonDiv a.on:hover{background:#FF840C;color:#fff;}

#f_buttonDiv a.on:hover{background:#FF6600;}
-->

SQL循 环 体 如下：

<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> 别忘了SQL查询语句： -------------------------------------------------------------------------------- select top 5 ID,Title,Adddate,Picurl,Slide,Verific from KS_Article where verific=1 and Slide=1 order by Adddate desc  -------------------------------------------------------------------------------- 如果你还不会做或者做不出来更或者看不懂代码，那请告知我，我把视频发出来。