Use pure css+div to write beautiful flash slides and SQL tag tutorials!
The following code a bit more! But you must like it!
Use pure css+div to write beautiful flash slides and SQL tag tutorials! I don't want to talk nonsense, come straight to the point.
First Look at the demo: http://www.gz7y.com point wonderful recommend you can see!
If the following code you can not understand or do not come out, tomorrow wait for my video bar.
CSS is as follows:
<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>
The SQL loop body is as follows:
<div id= "F_div" >
<!--picture area-->
<div id= "F_imgdiv" ></div>
<div id= "F_infodiv" >
<!--digital button area-->
<div id= "F_buttondiv" ></div>
</div>
</div>
<script>
var imgwidth=250;
var imgheight=205;
var _timeout_=5000;
var show_text = true; Whether to display focus text
var timeout=_timeout_;
The time to switch after Var timeout2=_timeout_/2;//onmouseout img
var now=0; First picture
var target= "_blank"; Open mode
var button_on = ' on '; The style name of the current focus corresponding button
var button_off = ';//non-current focus button's style name
Cannot modify region
var imgurl = new Array ();
var imgtext = new Array ();
var imglink = new Array ();
var imgalt= new Array ();
var menulist = new Array ()//Menu
var ver=2; Compatible browser version default 2 is not 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;iif ((imgurl[i]!= "") && (imgtext[i]!= "") && (imglink[i]!= "") && (imgalt[i]!= "")) {
count++;
} else {
Break
}
}
function p$ (string) {
document.write (string);
}
function $ (ID) {
return document.getElementById (ID);
}
Fixed picture 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 gradient line (ie css:f_line)
function Draw_line () {
var div = document.createelement ("div");
div.id = ' f_line ';
$ (' F_infodiv '). InsertBefore (div,$ (' F_infodiv '). Childnodes.item (0));
}
Performance Layer Start
Image
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);
Number button
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);
}
Performance Layer End
$ (' f_img '). Onmouseover=function () {window.clearinterval (thetimer);}
$ (' f_img '). Onmouseout=function () {thetimer=settimeout ("Change ()", TimeOut2);}
try{//Filter version
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>
Don't forget the SQL query statement:
--------------------------------------------------------------------------------
Select Top 5 id,title,adddate,picurl,slide,verific from ks_article where verific=1 and slide=1 the ORDER by adddate desc---- ----------------------------------------------------------------------------
If you're not going to do it or can't do it or read the code, please let me know and I'll send the video.
