Very beautiful js+css picture slide switch special effects _javascript tips

Very beautiful js+css picture slideshow switching effects, use in your home page is quite good, widescreen picture format, each picture smooth fly into the switch, the mouse put on the automatic switch, and flash smooth effect almost, visual impact is very cool, and the code is not much, debugging calls are convenient, suggest attention Oh!

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Picture Slide Switch </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:650px; height:250px; overflow:hidden; margin:20px 0 20px 300px;}
#ibanner_pic {}
#ibanner_pic a {position:absolute; top:0; display:block; width:650px; 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= ' 650px ';
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= ' 650px ';
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= ' 650px ';
Moveelement (' Picli_ ' +nextnum,0,0,10);
}
}
Addloadevent (ADDBTN);
Addloadevent (Ibanner);
</script>
<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>