JavaScript上下自动切换效果

<! 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=gb2312" />
< title ></ title >
< style type ="text/css" >
body, ul, ol, dl, dt, dd, h1, h2, h3, h4, h5, p, form { padding : 0 ;
margin : 0 ; }
li { list-style : none ; }
img { border : 0 ; }
body { font-family : Arial ; font-size : 12px }
a { text-decoration : none ; color : #000 }
#wrap { width : 920px ; height : 130px ; margin : 55px auto ; position : relative ; overflow : hidden }
#colList { width : 65px ; position : absolute ; right : 0 ; bottom : 3px ; z-index : 9999 ; }
#colList li { width : 15px ; height : 15px ; background : #fff ; float : left ; margin-left : 3px ; display : inline ; text-align : center ; border : 1px solid }
#colList li a { display : block ; height : 15px }
#color { width : 920px ; height : 390px ; position : absolute ; top : 0px ; left : 0 ; z-index : 9998 }
.box { width : 920px ; height : 130px ; }
.red { background : red ; }
.yellow { background : yellow ; }
.orange { background : orange ; }
</ style >

< script type ="text/javascript" >
// alert(-90/10)
var Speed = 0 ;
var timer = null ;
var timers = null ;
var num = 0 ;
function topMove(iTarget){
/* if(timer){
clearInterval(timer)
} */
colorMove(iTarget)
}
function colorMove(n){
var color = document.getElementById( " color " );
if (color.offsetTop != n){
Speed += (n - color.offsetTop) / 7;
}
color.style.top = Speed + " px " ;
if (timer){
clearTimeout(timer)
}
timer = setTimeout( " colorMove( " + n + " ) " , 10 )
}
function autoMove(){

if ( 0 == num){
topMove( 0 );
num = - 130 ;
}
else if ( - 130 == num){
topMove( - 130 );
num = - 260 ;
}
else {
topMove(num);
num = 0 ;
}
}
setInterval( " autoMove() " , 1000 )

</ script >
</ head >

< body >

< div id ="wrap" >
< ul id ="colList" >

< li >< a href ="" onmouseover ="topMove(0)" > 1 </ a ></ li >
< li >< a href ="" onmouseover ="topMove(-130)" > 2 </ a ></ li >
< li >< a href ="" onmouseover ="topMove(-260)" > 3 </ a ></ li >
</ ul >
< div id ="color" >

< div class ="red box" >
</ div >

< div class ="yellow box" >
</ div >
< div class ="orange box" >
</ div >

</ div >
</ div >

</ body >
</ html >

转载于:https://www.cnblogs.com/blueDream2011/archive/2011/06/28/2091812.html