<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Super Classic set of mouse control about scrolling picture with automatic rollover </title> </pead> <body> <div class=" Rollbox "> <div class=" Leftbotton "onmousedown=" Isl_goup () "onmouseup=" Isl_stopup () "onmouseout=" ISL_StopUp () " ></div> <div class= "Cont" id= "Isl_cont" > <div class= "Scrcont" > <div id= "List1" "> <!--picture List begin--> <div class=" pic "> <p> Zhou Xian ;/p> </div> <div class= "pic" > <p> Zhou </p> </div> <div class= "pic" > <p> Chris </p> </div> <div class= "pic" > <p> Wang Nesu </p> </div> <div class= "pic" > <p> Cheven 琇 </p> </div> <div class= "pic" > <p> Chrome & lt;/p> </div> <div class= "pic" > <p> jia Just as </p> </div> <!--picture List end--> </div> <div id= "List2" ></div > </div> </div> <div class= "Rightbotton" onmousedown= "Isl_godown ()" onmouseup= "Isl_st Opdown () "onmouseout=" Isl_stopdown () "></div> </div> </div> <style type=" Text/css "> & lt;! --. rollbox{width:704px;overflow:hidden;padding:12px 0 5px 6px;} . Rollbox. Leftbotton{height:52px;width:19px;background:url (http://i3.sinaimg.cn/edu/deco/2007/0924/career/job_mj_069.gif ) no-repeat 11px 0;overflow:hidden;float:left;display:inline;margin:25px 0 00;cursor:pointer;} . Rollbox. Rightbotton{height:52px;width:20px;background:url (http://i3.sinaimg.cn/edu/deco/2007/0924/career/job_mj_069. GIF) no-repeat-8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;} . Rollbox. Cont{width:663px;overflow:hidden;float:left;} . Rollbox. scrcont{width:10000000px;} . Rollbox. Cont. Pic{width:132px;float:left;text-align:center;} . Rollbox. Cont. pic Img{padding:4px;background: #fff; border:1px solid #ccc;d isplay:block;margin:0 auto; . Rollbox. Cont. pic P{line-height:26px;color: #505050;} . Rollbox. Cont A:link,.rollbox. Cont a:visited{color: #626466; text-decoration:none;} . Rollbox. Cont a:hover{color: #f00; text-decoration:underline;} . Rollbox #List1,. Rollbox #List2 {float:left;} --> </style> <script language= "javascript" type= "Text/javascript" > <!--//--><! [cdata[//><!--//Picture scrolling list Mengjia 070816 var Speed = 10;//speed (milliseconds) var space = 5;//per Move (px) var pagewidth = 132;/ /page width var fill = 0;Integer shift var movelock = false; var movetimeobj; var Comp = 0; var autoplayobj = null; Getobj ("List2"). InnerHTML = Getobj ("List1"). InnerHTML; Getobj (' Isl_cont '). scrollleft = fill; Getobj ("Isl_cont"). onmouseover = function () {clearinterval (autoplayobj);} Getobj ("Isl_cont"). onmouseout = function () {autoplay ();} AutoPlay (); function Getobj (objname) {if (document.getElementById) {return eval (' document.getElementById (' +objname+ ') ')}else{ Return eval (' document.all. ') +objname)} function AutoPlay () {//automatic scrolling clearinterval (autoplayobj); Autoplayobj = SetInterval (' Isl_godown (); Isl_stopdown (); ', 5000); Interval time} function Isl_goup () {//Flip start if (movelock) return; Clearinterval (Autoplayobj); Movelock = true; Movetimeobj = SetInterval (' Isl_scrup (); ', Speed); function Isl_stopup () {//Up-turn Stop clearinterval (movetimeobj); if (getobj (' Isl_cont '). ScrollLeft% Pagewidth-fill!= 0) {Comp = fill-(Getobj (' Isl_cont '). ScrollLeft% pagewidth); COMPSCR (); }else{Movelock = false; } AutoPlay (); function Isl_scrup () {//Flip action if (Getobj (' Isl_cont '). ScrollLeft <= 0) {getobj (' Isl_cont '). ScrollLeft = Getobj (' Isl_c Ont '). ScrollLeft + getobj (' List1 '). offsetwidth} getobj (' Isl_cont '). scrollleft-= space; function Isl_godown () {//Inverted clearinterval (movetimeobj); if (Movelock) return; Clearinterval (Autoplayobj); Movelock = true; Isl_scrdown (); Movetimeobj = SetInterval (' Isl_scrdown () ', Speed); function Isl_stopdown () {//down-turn Stop clearinterval (movetimeobj); if (getobj (' Isl_cont '). ScrollLeft% Pagewidth-fill!= 0) {Comp = Pagewidth-getobj (' Isl_cont '). ScrollLeft% Pagewidt H + fill; COMPSCR (); }else{Movelock = false; } autoplay (); The function Isl_scrdown () {//Flip action if (Getobj (' Isl_cont '). ScrollLeft >= getobj (' List1 '). ScrollWidth) {getobj (' Isl_ Cont '). ScrollLeft = Getobj (' Isl_cont '). Scrollleft-getobj (' List1 '). ScrollWidth; Getobj (' Isl_cont '). ScrollLeft + = space; function Compscr () {var; if (Comp = = 0) {Movelock = FalSe;return;} if (Comp < 0) {//Upside down if (Comp <-space) {Comp + = space; num = space; }else{num =-comp; Comp = 0; } getobj (' Isl_cont '). scrollleft = num; SetTimeout (' Compscr () ', Speed); }else{//Next Turn if (Comp > Space) {Comp = space; num = space; }else{num = Comp; Comp = 0; } getobj (' Isl_cont '). scrollleft + = num; SetTimeout (' Compscr () ', Speed); }}//--><!]] > </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
