Image switch effect (1): Native JS image switching effects

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