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

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

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

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

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

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

CSS如下：
<STYLE type=text/css>
<！--
#f_div{width:230px; height:205px; margin:0 auto; overflow:hidden;}
#f_imgDiv{width:100%; height:205px; overflow:hidden;}
#f_img{filter:progid:DXImageTransform.Microsoft.Fade（Overlap=1.00）; border:0;}
#f_infoDiv{width:100%;top:-16px ！important;top:-18px; position:relative;}
#f_buttonDiv{width:100%; height:17px; overflow:hidden; text-align:left;}
#f_line{width:100%;height:1px;background:#fff; overflow:hidden;filter:progid:DXImageTransform.Microsoft.Alpha（startX=0, startY=0, finishX=50, finishY=100,style=1,opacity=0,finishOpacity=100）}
#f_buttonDiv div{width:1px;height:17px; background:#fff; float:right;}
#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;}
-->
</STYLE>

SQL循环体如下：

<div id="f_div">
<！--图片区域-->
<div id="f_imgDiv"></div>
<div id="f_infoDiv">
<！--数字按钮区域-->
<div id="f_buttonDiv"></div>
</div>
</div>
<script>
var imgWidth=250;
var imgHeight=205;
var _timeOut_=5000;
var show_text = true; //是否显示焦点文字
var timeOut=_timeOut_;
var timeOut2=_timeOut_/2;//onmouseout img后需要切换的时间
var now=0;              //第一张图
var target="_blank";   //打开方式
var button_on ="on"; //当前焦点对应按钮的样式名
var button_off ="";//非当前焦点对应按钮的样式名
//不可修改区域
var imgUrl = new Array（）;
var imgText = new Array（）;
var imgLink = new Array（）;
var imgAlt= new Array（）;
//var menuList = new Array（）;//菜单menu
var ver=2; //兼容浏览器版本默认2 为非ie
var firstTime=true;
var n =-1;
[loop=5]
imgUrl[++n]="{$Field（Picurl,Text,0,...,0,）}";
imgText[n]="<a href="{$Field（ID,GetInfoUrl,1,1）}" target="_blank" class=linkblack>{$Field（Title,Text,0,...,0,）}</a>";
imgLink[n]="{$Field（ID,GetInfoUrl,1,1）}";
imgAlt[n]="{$Field（Title,Text,0,...,0,）}";
[/loop]
var count=0;
for （i=0;i<imgUrl.length;i++） {
if（（imgUrl[i]！=""） && （imgText[i]！=""）&& （imgLink[i]！=""）&& （imgAlt[i]！=""）） {
count++;
} else {
break;
}
}
function p$（string）{
document.write（string）;
}
function $（id）{
return document.getElementById（id）;
}
//固定图片size
p$（"<style> #f_img { width:"+imgWidth+"px;height:"+imgHeight+"px;</style>"）;
function change（）{
if （ver==1）{
with（$（"f_img"）.filters[0]）{
Transition=1;
apply（）;
play（）;
}
}
if （firstTime）{ firstTime=false;timeOut=_timeOut_/1000;}
else{
$（"f_img"）.src=imgUrl[now];
$（"f_img"）.alt=imgAlt[now];
$（"f_imgLink"）.href=imgLink[now];
for （var i=0;i<count;i++） {
$（"b"+i）.className="button";
//$（"f_menu"+i）.className="";
}
$（"b"+now）.className="on";
//$（"f_menu"+now）.className="on";
now=（now>=imgUrl.length-1）？0:now+1;
timeOut=_timeOut_;
}
theTimer=setTimeout（"change（）", timeOut）;
}
function b_change（num）{
window.clearInterval（theTimer）;
now=num;
firstTime=false;
change（）;
}
//draw 渐变line （即css:f_line）
function draw_line（）{
var div = document.createElement（"div"）;
div.id = "f_line";
$（"f_infoDiv"）.insertBefore（div,$（"f_infoDiv"）.childNodes.item（0））;
}
//表现层 start
//图片
var a = document.createElement（"a"）;
a.id="f_imgLink";
a.target=target;
a.href=imgLink[now];
$（"f_imgDiv"）.appendChild（a）;
var img = document.createElement（"img"）;
img.id="f_img";
img.width=imgWidth;
img.height=imgHeight;
img.src=imgUrl[now];
img.alt=imgAlt[now];
a.appendChild（img）;
//数字按钮
for （var i=count-1;i>=0;i--）{
var div_bg = document.createElement（"div"）;
div_bg.id = "div_bg"+i;
div_bg.className="bg";
$（"f_buttonDiv"）.appendChild（div_bg）;
var a = document.createElement（"a"）;
a.id = "b"+i;
a.className = （i==now+1）？"button_on":"button_off";
a.title=imgAlt[i];
a.innerHTML=i+1;
a.href="javascript:b_change（"+i+"）";
$（"div_bg"+i）.appendChild（a）;
var div= document.createElement（"div"）;
$（"f_buttonDiv"）.appendChild（div）;
}
//表现层 end
$（"f_img"）.onmouseover=function（）{window.clearInterval（theTimer）;}
$（"f_img"）.onmouseout=function（）{theTimer=setTimeout（"change（）", timeOut2）;}
try{  //滤镜版本
new ActiveXObject（"DXImageTransform.Microsoft.Fade"）;
$（"f_img"）.filters[0].play（）;
ver=1;
draw_line（）;
}
catch （e）{ver=2;}
var theTimer = setTimeout（"change（）", _timeOut_/1000）;
</script>

别忘了SQL查询语句：

--------------------------------------------------------------------------------
select top 5 ID,Title,Adddate,Picurl,Slide,Verific from KS_Article where verific=1 and Slide=1 order by Adddate desc --------------------------------------------------------------------------------

如果你还不会做或者做不出来更或者看不懂代码，那请告知我，我把视频发出来。