Very beautiful JS + CSS image magic light switching special effects, used in your home page is relatively good, wide screen image format, each picture smoothly fly in switch, put the mouse on automatic switch, and FLASH smooth effect is similar, the visual impact is very good, and there are not many codes, and debugging and calling are all convenient. Please pay attention to it!
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> switching between image slides </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Body {background: # FFF; color: #333; font: 12px/1.6em Helvetica, Arial, sans-serif ;}
H1, h2, h3, h4, h5, h6 {font-size: 1em ;}
A {color: # 0287CA; text-decoration: none ;}
A: hover {text-decoration: underline ;}
Ul, li {list-style: none ;}
Fieldset, img {border: none ;}
Legend {display: none ;}
Em, strong, cite, th {font-style: normal; font-weight: normal ;}
Input, textarea, select, button {font: 12px Helvetica, Arial, sans-serif ;}
Table {border-collapse: collapse ;}
Html {overflow:-moz-scrollbars-vertical ;}
# Ibanner {position: relative; width: pixel PX; height: 250px; overflow: hidden; margin: 20px 0 20px 300px ;}
# Ibanner_pic {}
# Ibanner_pic a {position: absolute; top: 0; display: block; width: pixel; height: 250px; overflow: hidden ;}
# Ibanner_btn {position: absolute; z-index: 9999; right: 5px; bottom: 5px; font-weight: 700; font-family: Arial ;}
# Ibanner_btn span {display: block; float: left; margin-left: 4px; padding: 0 5px; background: #000; cursor: pointer ;}
# Ibanner_btn. normal {height: 20px; margin-top: 8px; border: 1px solid #999; color: #999; font-size: 16px; line-height: 20px ;}
# Ibanner_btn. current {height: 28px; border: 1px solid # FF5300; color: # FF5300; font-size: 28px; line-height: 28px ;}
</Style>
<Script type = "text/javascript">
Function $ (id) {return document. getElementById (id );}
Function addLoadEvent (func ){
Var oldonload = window. onload;
If (typeof window. onload! = 'Function '){
Window. onload = func;
} Else {
Window. onload = function (){
Oldonload ();
Func ();
}
}
}
Function addBtn (){
If (! $ ('Ibanner ') |! $ ('Ibanner _ pic ') return;
Var picList = $ ('ibanner _ pic '). getElementsByTagName ('A ');
If (picList. length = 0) return;
Var btnBox = document. createElement ('div ');
BtnBox. setAttribute ('id', 'ibanner _ btn ');
Var SpanBox = '';
For (var I = 1; I <= picList. length; I ++ ){
Var spanList = '<span class = "normal">' + I + '</span> ';
SpanBox + = spanList;
}
BtnBox. innerHTML = SpanBox;
$ ('Ibanner '). appendChild (btnBox );
$ ('Ibanner _ btn '). getElementsByTagName ('span') [0]. className = 'current ';
For (var m = 0; m <picList. length; m ++ ){
Var attributeValue = 'picli _ '+ m
PicList [m]. setAttribute ('id', attributeValue );
}
}
Function moveElement (elementID, final_x, final_y, interval ){
If (! Document. getElementById) return false;
If (! Document. getElementById (elementID) return false;
Var elem = document. getElementById (elementID );
If (elem. movement ){
ClearTimeout (elem. movement );
}
If (! Elem. style. left ){
Elem. style. left = "0px ";
}
If (! Elem. style. top ){
Elem. style. top = "0px ";
}
Var xpos = parseInt (elem. style. left );
Var ypos = parseInt (elem. style. top );
If (xpos = final_x & ypos = final_y ){
Moveing = false;
Return true;
}
If (xpos <final_x ){
Var dist = Math. ceil (final_x-xpos)/10 );
Xpos = xpos + dist;
}
If (xpos> final_x ){
Var dist = Math. ceil (xpos-final_x)/10 );
Xpos = xpos-dist;
}
If (ypos <final_y ){
Var dist = Math. ceil (final_y-ypos)/10 );
Ypos = ypos + dist;
}
If (ypos> final_y ){
Var dist = Math. ceil (ypos-final_y)/10 );
Ypos = ypos-dist;
}
Elem. style. left = xpos + "px ";
Elem. style. top = ypos + "px ";
Var repeat = "moveElement ('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
Elem. movement = setTimeout (repeat, interval );
}
Function classNormal (){
Var btnList = $ ('ibanner _ btn '). getElementsByTagName ('span ');
For (var I = 0; I <btnList. length; I ++ ){
BtnList [I]. className = 'normal ';
}
}
Function picZ (){
Var picList = $ ('ibanner _ pic '). getElementsByTagName ('A ');
For (var I = 0; I <picList. length; I ++ ){
PicList [I]. style. zIndex = '1 ';
}
}
Var autoKey = false;
Function iBanner (){
If (! $ ('Ibanner ') |! $ ('Ibanner _ pic ') |! $ ('Ibanner _ btn ') return;
$ ('Ibanner '). onmouseover = function () {autoKey = true };
$ ('Ibanner '). onmouseout = function () {autoKey = false };
Var btnList = $ ('ibanner _ btn '). getElementsByTagName ('span ');
Var picList = $ ('ibanner _ pic '). getElementsByTagName ('A ');
If (picList. length = 1) return;
PicList [0]. style. zIndex = '2 ';
For (var m = 0; m <btnList. length; m ++ ){
BtnList [m]. onmouseover = function (){
For (var n = 0; n <btnList. length; n ++ ){
If (btnList [n]. className = 'current '){
Var currentNum = n;
}
}
ClassNormal ();
PicZ ();
This. className = 'current ';
PicList [currentNum]. style. zIndex = '2 ';
Var z = this. childNodes [0]. nodeValue-1;
PicList [z]. style. zIndex = '3 ';
If (currentNum! = Z ){
PicList [z]. style. left = '0000p ';
MoveElement ('picli _ '+ z, 0, 0, 10 );
}
}
}
}
SetInterval ('autobanner () ', 5000 );
Function autoBanner (){
If (! $ ('Ibanner ') |! $ ('Ibanner _ pic ') |! $ ('Ibanner _ btn ') | autoKey) return;
Var btnList = $ ('ibanner _ btn '). getElementsByTagName ('span ');
Var picList = $ ('ibanner _ pic '). getElementsByTagName ('A ');
If (picList. length = 1) return;
For (var I = 0; I <btnList. length; I ++ ){
If (btnList [I]. className = 'current '){
Var currentNum = I;
}
}
If (currentNum = (picList. length-1 )){
ClassNormal ();
PicZ ();
BtnList [0]. className = 'current ';
PicList [currentNum]. style. zIndex = '2 ';
PicList [0]. style. zIndex = '3 ';
PicList [0]. style. left = '0000p ';
MoveElement ('picli _ 0', 0, 0, 10 );
} Else {
ClassNormal ();
PicZ ();
Var nextNum = currentNum + 1;
BtnList [nextNum]. className = 'current ';
PicList [currentNum]. style. zIndex = '2 ';
PicList [nextNum]. style. zIndex = '3 ';
PicList [nextNum]. style. left = '0000p ';
MoveElement ('picli _ '+ nextNum, 0, 0, 10 );
}
}
AddLoadEvent (addBtn );
AddLoadEvent (iBanner );
</Script>
</Head>
<Body>
<Div id = "ibanner">
<Div id = "ibanner_pic">
<A href = "/jscss/"> </a>
<A href = "/sort/index.shtml"> </a>
<A href = "/other/lastupdate.shtml"> </a>
<A href = "/other/top100.shtml"> </a>
</Div>
</Div> <! -- Ibanner end -->
<Div style = "height: 20px; background: # EEE;"> </div>
</Body>
</Html>