Very good mouse sliding image effect JavaScript + CSS

Step 1: Design what I want!
I used FW to put the previous album effect (http://www.jb51.net/blogview.asp? Logid = 628) changed to a simple design!

Step 2: Layout! CopyCode The Code is as follows: <Div id = "imgbox">
<Ul>
<Li> <a href = "#"> </a> </LI>
<Li> <a href = "#"> </a> </LI>
<Li> <a href = "#"> </a> </LI>
<Li> <a href = "#"> </a> </LI>
<Li> <a href = "#"> </a> </LI>

</Ul>
</Div>

at this time, you can see the effect: <ul> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </LI> <li> </ LI> <li> </LI> <li> </LI> <li> </LI> </ul> <p>
[Ctrl + A select all Note: To introduce external JS, refresh it before execution]

Step 3: Design JavaScript; Copy codeThe Code is as follows: <SCRIPT>
Scrollimg = function (imgboxid ){
This. imgboxid = imgboxid; // get the ID of the DIV with the outermost side of the image;
This. Table = This. createtable (); // creates a table with one row and three columns.
This. setspan (); // put the alt file on the image behind the image
This. setonclick (); // Add the Click Event and put the content in the table.
This. $ (this. imgboxid). appendchild (this. Table) // complete all
}

Scrollimg. Prototype = {
$: Function (objid ){
Return document. getelementbyid (objid );
},
$: Function (n ){
Return document. createelement (N );
},
Createtable: function (){
VaR table = this. $ ('table ');
VaR TR = this. $ ('tr ');
For (var k = 0; k <3; k ++) tr. appendchild (this. $ ('td '));
VaR tbody = this. $ ('tbody ');
Tbody. appendchild (TR );
Table. appendchild (tbody );
Return table;
},
Setspan: function (){
VaR links = this. $ (this. imgboxid). getelementsbytagname ('A ');
For (var k = 0; k <links. length; k ++ ){
VaR span = this. $ ('span ');
Span. appendchild (document. createtextnode (Links [K]. getelementsbytagname ('img ') [0]. alt ));
Links [K]. appendchild (SPAN );
}
Return;
},
Setonclick: function (){
VaR imgarray = ['left', 'right'];
VaR TDS = This. Table. getelementsbytagname ('td ');
For (var k = 0; k <TDs. length; k ++ ){
TDS [K]. setattribute ('valign ', 'center ');
If (k = 1 ){
VaR DIV = this. $ ('div ');
VaR ul = this. $ (this. imgboxid). getelementsbytagname ('ul ') [0];
Div. appendchild (UL );
TDS [K]. appendchild (DIV );
Continue
}

VaR IMG = this. $ ('img ');
IMG. setattribute ('src', 'HTTP: // www.jb51.net/attachments/month_0902/'?imgarray=k={'.gif ');
IMG. setattribute ('alt', imgarray [k]);
IMG. style. cursor = 'pointer ';
IMG. onclick = function (){
VaR imgbox = This. parentnode. parentnode. getelementsbytagname ('div ') [0];
VaR NS = imgbox. scrollleft;
VaR tkey = 500;
If (this. Alt = 'left '){
VaR left = setinterval (function (){
Imgbox. scrollleft = imgbox. scrollleft-(tkey * 0.1 );
Tkey = tkey * 0.9;
If (tkey <2) clearinterval (left );
}, 50 );
} Else {
VaR right = setinterval (function (){
Imgbox. scrollleft = imgbox. scrollleft + (tkey * 0.1 );
Tkey = tkey * 0.9;
If (tkey <2) clearinterval (right );
}, 50 );
}
Return;
}
TDS [K]. appendchild (IMG );
}
Return;
}
}

VaR test = new scrollimg ('imgbox ');
</SCRIPT>

Now let's look at the effect!Xmlns = "http://www.w3.org/1999/xhtml">