Tutorials on beautiful Flash slides and SQL labels written with pure CSS + Div!

Tutorials on beautiful Flash slides and SQL labels written with pure CSS + Div!

BelowCodeA little more! But you certainly like it!

Tutorials on beautiful Flash slides and SQL labels written with pure CSS + Div! I don't want to talk nonsense.

First look at the demo: http://www.gz7y.com point wonderful recommendations can see!

If you cannot understand the following code or can't do it, wait for my video tomorrow.

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. on: Link, # f_buttondiv. on: visited, # f_buttondiv. on: active, # f_buttondiv. on: hover {Background: # ff840c; color: # FFF ;}
# F_buttondiv A. On: hover {Background: # ff6600 ;}
-->
</Style>

The SQL cycle is as follows:

<Div id = "f_div">
<! -- Image region -->
<Div id = "f_imgdiv"> </div>
<Div id = "f_infodiv">
<! -- Digit 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 the focus text
VaR timeout = _ timeout _;
VaR timeout2 = _ timeout _/2; // time to switch after onmouseout img
VaR now = 0; // the first image
VaR target = "_ blank"; // Open Mode
VaR button_on = 'on'; // The style name of the button corresponding to the current focus
VaR button_off = ''; // The style name of the button corresponding to the non-current focus
// Unchangeable 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 with the browser version; default value: 2: Non-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 If (imgurl [I]! = "") & (Imgtext [I]! = "") & (Imglink [I]! = "") & (Imgalt [I]! = "")){
Count ++;
} Else {
Break;
}
}
Function p $ (string ){
Document. Write (string );
}
Function $ (ID ){
Return document. getelementbyid (ID );
}
// Fixed image 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 (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 of the Presentation Layer
// Image
VaR A = Document. createelement ("");
A. ID = "f_imglink ";
A.tar get = target;
A. href = imglink [now];
$ ('F _ imgdiv '). appendchild ();
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 );
// Numeric 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. 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 ();
VaR DIV = Document. createelement ("Div ");
$ ('F _ buttondiv '). appendchild (DIV );
}
// Presentation 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>

Do not forget the SQL query statement:

--------------------------------------------------------------------------------
Select top 5 ID, title, adddate, picurl, slide, verific from ks_article where verific = 1 and slide = 1 order by adddate DESC limit --------------------------------------------------------------------------------

If you still don't do it or cannot do it, or do not understand the code, please let me know and I will send the video.