Transferred from: http://www.codefans.net/jscss/code/4699.shtml
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">. Container,. Container*{margin:0; padding:0;}. container{width:408px; height:168px; overflow:hidden;position:relative;}. Slider{position:absolute;}. Slider li{list-Style:none;display:inline;}. Slider img{width:408px; height:168px; display:block;}. slider2{width:2000px;}. Slider2 li{float: Left;}. num{position:absolute; right:5px; bottom:5px;}. Num li{float: Left;color: #FF7300; text-align:center;line-height:16px;width:16px;height:16px;font-family:arial;font-size:12px ; cursor:pointer;overflow:hidden;margin:3px 1px;border:1px solid #FF7300; background-color: #fff;}. Num li.on{color: #fff; Line-height:21px;width:21px;height:21px;font-size:16px;margin:0 1px;border:0;background-color: #FF7300; font-Weight:bold;}</style><div class= "Container" id= "IdTransformView2" > <ul class= "Slider Slider2" id= "IdSlider2" > &L T;li></li> <li></li> <li></li> </ul> <ul class= "num" id= "idNum2" > <li>1</li> <li>2</li> <li>3</li> </ul>< /div><script type= "Text/javascript" >var$ =function(ID) {return"string" = =typeofId?document.getElementById (ID): ID;};varClass ={create:function() { return function() { This. initialize.apply ( This, arguments); }}}object.extend=function(destination, source) { for(varPropertyinchsource) {Destination[property]=Source[property]; } returndestination;}varTransformview =class.create (); Transformview.prototype= { //container object, sliding object, toggle parameter, toggle quantityInitializefunction(container, slider, parameter, count, options) {if(Parameter <= 0 | | count <= 0)return; varOcontainer = $ (container), Oslider = $ (slider), Othis = This; This. Index = 0;//Current Index This. _timer =NULL;//Timer This. _slider = Oslider;//Sliding Objects This. _parameter = parameter;//Toggle Parameters This. _count = Count | | 0;//Switching Quantity This. _target = 0;//Target Parameters This. SetOptions (options); This. UP =!! This. Options. up; This. Step = Math.Abs ( This. Options. STEP); This. Time = Math.Abs ( This. Options. Time); This. Auto =!! This. Options. Auto; This. Pause = Math.Abs ( This. Options. Pause); This. OnStart = This. Options.onstart; This. OnFinish = This. Options.onfinish; OContainer.style.overflow= "hidden"; OContainer.style.position= "relative"; OSlider.style.position= "Absolute"; OSlider.style.top= OSlider.style.left = 0; }, //Set default PropertiesSetOptions:function(options) { This. options = {//Default ValueUp:true,//whether up (otherwise left)Step:5,//sliding rate of changeTime:10,//Sliding delayAuto:true,//whether to convert automaticallypause:2000,//Pause time (valid when Auto is true)OnStart:function(){},//execute at start of conversionOnFinish:function(){}//Execute when conversion is complete }; Object.extend ( This. Options, Options | | {}); }, //Start Switching SettingsStart:function() { if( This. Index < 0){ This. Index = This. _count-1; } Else if( This. Index >= This. _count) { This. Index = 0; } This. _target =-1 * This. _parameter * This. Index; This. OnStart (); This. Move (); }, //MovingMove:function() {cleartimeout ( This. _timer); varOthis = This, style = This. Up? "Top": "Left", Inow = parseint ( This. _slider.style[style]) | | 0, Istep = This. Getstep ( This. _target, Inow); if(Istep! = 0) { This. _slider.style[style] = (Inow + istep) + "px"; This. _timer = SetTimeout (function() {othis.move ();}, This. Time); } Else { This. _slider.style[style] = This. _target + "px"; This. OnFinish (); if( This. Auto) { This. _timer = SetTimeout (function() {othis.index++; Othis.start ();}, This. Pause); } } }, //Get step sizeGetstep:function(ITarget, Inow) {varIstep = (itarget-inow)/ This. Step; if(Istep = = 0)return0; if(Math.Abs (Istep) < 1)return(Istep > 0? 1:-1); returnIstep; }, //StopStop:function(ITarget, Inow) {cleartimeout ( This. _timer); This. _slider.style[ This. Up? "Top": "Left"] = This. _target + "px"; }};window.onload=function(){ functionEach (list, fun) { for(vari = 0, len = list.length; i < Len; i++) {fun (list[i], i);} }; varOBJS = $ ("idNum2"). getElementsByTagName ("Li")); varTV =NewTransformview ("IdTransformView2", "IdSlider2", 408, 3, {onStart:function() {Each (OBJS,function(O, i) {o.classname = TV. Index = = I? "On": ";}"},//button StyleUp:false }); Tv. Start (); Each (OBJS,function(o, i) {o.onmouseover=function() {o.classname= "On"; Tv. Auto=false; Tv. Index=i; Tv. Start (); } o.onmouseout=function() {o.classname= ""; Rvh Auto=true; Rvh Start (); } })}</script></body>View Code