JavaScript Picture Sliding Switch code _ Image effect

<ptml xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content= "text/" html charset=gb2312 "/> <title>nvida website picture sliding-http://www.jb51.net</title> <style type=" Text/css "> Changebox{width:610px;height:342px;overflow:hidden; position:relative;} #changebox #changeAction {width:1220px;height:342px; position:absolute;} #changebox #changeAction #links {width:610px;height:342px;background: #000000; float:left;font:700 55px Arial, Helvetica, Sans-serif; Color: #FFFFFF; text-align:center;} #changebox #changeAction #links #threePro {height:194px;float:left;} #changebox #changeAction #links #threePro dl{width:203px; height:190px; margin:0; padding:0; float:left;} #changebox #changeAction #links #threePro DL Dt{width:203px;height:150px;margin:0;padding:0;float:left;overflow: Hidden;position:relative;} #changebox #changeAction #links #threePro DL dt #Motherboard {margin:0 0 0 7px;position:absolute;left:0;top:0; Text-align:center; FloAt:left;} #changebox #changeAction #links #threePro DL dt #GraphicsCard {margin:0 0 0 7px;position:absolute;left:-203px;top:0; Text-align:center; Float:left;} #changebox #changeAction #links #threePro DL dt #Notebook {margin:0 0 0 7px;position:absolute;left:-410px;top:0; Text-align:center; Float:left;} #changebox #changeAction #links #threePro dl dd{width:147px;height:23px background:url (indexpic.gif) 0-339px; text-align:center;font:700 14px Verdana, Arial, Helvetica, Sans-serif; Color: #FFFFFF; PADDING:6PX 0 0 0; margin:0 0 0 30px;cursor:pointer;} #changebox #changeAction #links #support {width:600px; height:28px; overflow:hidden; position:relative; background:url (indexpic.gif) 0-300px;font:700 15px Arial, Helvetica, Sans-serif; Color: #FFCC00; padding:10px 0 0 10px;} #changebox #changeAction #links #support img{position:absolute; left:0; top:-300px;} #changebox #changeAction #links ul{width:203px; margin:0; padding:0; float:left;} #changebox #changeAction #links ul li{list-style:none;width:203px; margin:0; padding:0; Float:left; Color: #FFCC00; font:700 14px Arial, Helvetica, Sans-serif; Text-align:center;} #changebox #changeAction #links ul li.nvidia{width:126px;height:100px;overflow:hidden;position:relative;margin:0 0 10px 40px; padding:0; #changebox #changeAction #links ul Li.nvidia img{position:absolute; bottom:0; right:0;} #changebox #changeAction #links ul li.button{width:122px height:20px; padding:4px 0 0 0; margin:0 0 10px 42px; Overflow:hidden; Background:url (indexpic.gif) 0-369px; font:700 12px Arial, Helvetica, Sans-serif;text-align:center;color: #FFFFFF; Cursor:pointer;} #schoolButton {color: #FFFFFF; width:50px height:18px; font:700 12px Arial, Helvetica, Sans-serif; background: #006600; Text-align:center; padding:2px 0 0 0; margin:0 10px 0 0; Float:left; Cursor:pointer;} #schoolButton: hover{background: #FFFF00; color: #000000;} #indexButton {color: #FFFFFF; width:50px height:18px; font:700 12px Arial, Helvetica, Sans-serif; background: #006600; Text-align:center; padding:2px 0 0 0; margin:0 10px 0 0; Float:left; Cursor:pointer;} #indexButton: hover{background: #FFFF00; color: #000000;} #changebox #changeAction #links2 {width:610px;height:342px; Float:left background: #333; font:700 55px Arial, Helvetica , Sans-serif; Color: #FFFFFF; Text-align:center;} </style> <script type= "Text/javascript" > var tt; function Move () {var obj = document.getElementById (' changeaction '); if (parseint (Obj.style.left) < 0) {Obj.style.left = parseint (obj.style.left) + + "px"; The function move2 () {var obj = document.getElementById (' changeaction '); if (parseint (obj.style.left) > -610) {obj.style.left = parseint (obj.style.left)-ten + "px"; } function Button1Click () {clearinterval (TT); tt = SetInterval (' Move () ', 1); document.getElementById ("IndexButton"). Style.display = "None"; document.getElementById ("Schoolbutton"). Style.display = "block"; function Button2click () {clearinterval (TT); Tt=setinterval ('Move2 () ', 1); document.getElementById ("IndexButton"). Style.display = "block"; document.getElementById ("Schoolbutton"). Style.display = "None"; </script> </pead> <body> <div id= "Changebox" > <div id= "changeaction" > <div id= "l Inks "> 1 </div> <div id=" Links2 "> 2 </div> </div> </div> Next back </body&gt ; </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]