符合网站标准的图片切换代码(天极软件)

作者:闪电儿时间:2008-2-20 网友评论条【大中小】

天极网软件频道的图片切换特效,完全是由XHTML+CSS+JS实现的图片切换特效,弄了好半天啊!!如果您使用或者转载请别忘了加我的一个连接啊!

<html> <head> <title>js图片切换特效-中国asp之家</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> /*新焦点滚动*/ #MPB {width: 282px; height: 164px;} #MPB #SlidePlayer { position: relative; margin: 0 auto;} #MPB .Slides {overflow: hidden; list-style-type: none; height: 164px; margin: 0; padding: 0;} #MPB .Slides LI {float: left;width: 282px;height: 164px;} #MPB .Slides IMG {display: block;width: 282px;height: 164px;border:0px;} #MPB .SlideTriggers {list-style-type:none;position: absolute;top:0px;height: 18px; margin:4px 0px 0px 4px;padding: 0;width:16px;} #MPB .SlideTriggers LI {display: inline;background: url(/article/UploadPic/20082/20/200822083043320.gif) no-repeat center center;float: left;overflow: hidden;width: 16px;height: 16px;cursor: pointer;color:#0849AD;text-align: center;margin:1px;font: 13px Arial;} #MPB .SlideTriggers LI.Current {font:13px Arial;color: #FFF;background: url(/article/UploadPic/20082/20/200822083044654.gif) no-repeat center center;width: 16px;height:16px;margin: 1px;} </style> </head> <body> <script type="text/javascript"> if(typeof YAHOO=="undefined"){var YAHOO={};} YAHOO.namespace=function(){var a=arguments,o=null,i,j,d;for(i=0;i<a.length;i=i+1){d=a[i].split(".");o=YAHOO;for(j=(d[0]=="YAHOO")?1:0;j<d.length;j=j+1){o[d[j]]=o[d[j]]||{};o=o[d[j]];}} return o;};YAHOO.init=function(){this.namespace("util","widget","example");if(typeof YAHOO_config!="undefined"){var l=YAHOO_config.listener,ls=YAHOO.env.listeners,unique=true,i;if(l){for(i=0;i<ls.length;i=i+1){if(ls[i]==l){unique=false;break;}} if(unique){ls.push(l);}}}};YAHOO.register=function(name,mainClass,data){var mods=YAHOO.env.modules;if(!mods[name]){mods[name]={versions:[],builds:[]};} var m=mods[name],v=data.version,b=data.build,ls=YAHOO.env.listeners;m.name=name;m.version=v;m.build=b;m.versions.push(v);m.builds.push(b);m.mainClass=mainClass;for(var i=0;i<ls.length;i=i+1){ls[i](m);} if(mainClass){mainClass.VERSION=v;mainClass.BUILD=b;}else{YAHOO.log("mainClass is undefined for module "+name,"warn");}};YAHOO.env=YAHOO.env||{modules:[],listeners:[],getVersion:function(name){return YAHOO.env.modules[name]||null;}};YAHOO.lang={isArray:function(obj){},isBoolean:function(obj){return typeof obj=='boolean';},isFunction:function(obj){return typeof obj=='function';},isNull:function(obj){return obj===null;},isNumber:function(obj){return typeof obj=='number'&&isFinite(obj);},isObject:function(obj){return obj&&(typeof obj=='object'||YAHOO.lang.isFunction(obj));},isString:function(obj){return typeof obj=='string';},isUndefined:function(obj){return typeof obj=='undefined';},hasOwnProperty:function(obj,prop){},extend:function(subc,superc,overrides){if(!superc||!subc){throw new Error("YAHOO.lang.extend failed, please check that "+"all dependencies are included.");} var F=function(){};F.prototype=superc.prototype;subc.prototype=new F();subc.prototype.constructor=subc;subc.superclass=superc.prototype;if(superc.prototype.constructor==Object.prototype.constructor){superc.prototype.constructor=superc;} if(overrides){for(var i in overrides){subc.prototype[i]=overrides[i];}}},augment:function(r,s){}};YAHOO.init();YAHOO.util.Lang=YAHOO.lang;YAHOO.augment=YAHOO.lang.augment;YAHOO.extend=YAHOO.lang.extend;YAHOO.register("yahoo",YAHOO,{version:"2.2.2",build:"204"});(function(){var Y=YAHOO.util,getStyle,setStyle,id_counter=0,propertyCache={};var ua=navigator.userAgent.toLowerCase(),isOpera=(ua.indexOf('opera')>-1),isSafari=(ua.indexOf('safari')>-1),isGecko=(!isOpera&&!isSafari&&ua.indexOf('gecko')>-1),isIE=(!isOpera&&ua.indexOf('msie')>-1);var patterns={HYPHEN:/(-[a-z])/i,ROOT_TAG:/body|html/i};var toCamel=function(property){if(!patterns.HYPHEN.test(property)){return property;} if(propertyCache[property]){return propertyCache[property];} var converted=property;while(patterns.HYPHEN.exec(converted)){converted=converted.replace(RegExp.$1,RegExp.$1.substr(1).toUpperCase());} propertyCache[property]=converted;return converted;};if(document.defaultView&&document.defaultView.getComputedStyle){getStyle=function(el,property){var value=null;if(property=='float'){property='cssFloat';} var computed=document.defaultView.getComputedStyle(el,'');if(computed){value=computed[toCamel(property)];} return el.style[property]||value;};}else if(document.documentElement.currentStyle&&isIE){getStyle=function(el,property){};}else{getStyle=function(el,property){return el.style[property];};} if(isIE){setStyle=function(el,property,val){};}else{setStyle=function(el,property,val){if(property=='float'){property='cssFloat';} el.style[property]=val;};} YAHOO.util.Dom={get:function(el){if(YAHOO.lang.isString(el)){return document.getElementById(el);} if(YAHOO.lang.isArray(el)){var c=[];for(var i=0,len=el.length;i<len;++i){c[c.length]=Y.Dom.get(el[i]);} return c;} if(el){return el;} return null;},getStyle:function(el,property){},setStyle:function(el,property,val){property=toCamel(property);var f=function(element){setStyle(element,property,val);};Y.Dom.batch(el,f,Y.Dom,true);},getXY:function(el){},getX:function(el){},getY:function(el){},setXY:function(el,pos,noRetry){},setX:function(el,x){Y.Dom.setXY(el,[x,null]);},setY:function(el,y){Y.Dom.setXY(el,[null,y]);},getRegion:function(el){var f=function(el){var region=new Y.Region.getRegion(el);return region;};return Y.Dom.batch(el,f,Y.Dom,true);},getClientWidth:function(){return Y.Dom.getViewportWidth();},getClientHeight:function(){},getElementsByClassName:function(className,tag,root){var method=function(el){return Y.Dom.hasClass(el,className);};return Y.Dom.getElementsBy(method,tag,root);},hasClass:function(el,className){var re=new RegExp('(?:^|\\s+)'+className+'(?:\\s+|$)');var f=function(el){return re.test(el.className);};return Y.Dom.batch(el,f,Y.Dom,true);},addClass:function(el,className){},removeClass:function(el,className){},replaceClass:function(el,oldClassName,newClassName){},generateId:function(el,prefix){},isAncestor:function(haystack,needle){},inDocument:function(el){},getElementsBy:function(method,tag,root){tag=tag||'*';var nodes=[];if(root){root=Y.Dom.get(root);if(!root){return nodes;}}else{root=document;} var elements=root.getElementsByTagName(tag);if(!elements.length&&(tag=='*'&&root.all)){elements=root.all;} for(var i=0,len=elements.length;i<len;++i){if(method(elements[i])){nodes[nodes.length]=elements[i];}} return nodes;},batch:function(el,method,o,override){var id=el;el=Y.Dom.get(el);var scope=(override)?o:window;if(!el||el.tagName||!el.length){if(!el){return false;} return method.call(scope,el,o);} var collection=[];for(var i=0,len=el.length;i<len;++i){if(!el[i]){id=el[i];} collection[collection.length]=method.call(scope,el[i],o);} return collection;},getDocumentHeight:function(){},getDocumentWidth:function(){},getViewportHeight:function(){},getViewportWidth:function(){}};})(); YAHOO.util.CustomEvent=function(type,oScope,silent,signature){ this.type=type;this.scope=oScope||window;this.silent=silent;this.signature=signature||YAHOO.util.CustomEvent.LIST;this.subscribers=[];if(!this.silent){}};YAHOO.util.CustomEvent.LIST=0;YAHOO.util.CustomEvent.FLAT=1;YAHOO.util.CustomEvent.prototype={subscribe:function(fn,obj,override){if(!fn){throw new Error("Invalid callback for subscriber to '"+this.type+"'");} if(this.subscribeEvent){this.subscribeEvent.fire(fn,obj,override);} this.subscribers.push(new YAHOO.util.Subscriber(fn,obj,override));},unsubscribe:function(fn,obj){ return found;},fire:function(){var len=this.subscribers.length;if(!len&&this.silent){return true;} var args=[],ret=true,i;for(i=0;i<arguments.length;++i){args.push(arguments[i]);} var argslength=args.length;if(!this.silent){} for(i=0;i<len;++i){var s=this.subscribers[i];if(s){if(!this.silent){} var scope=s.getScope(this.scope);if(this.signature==YAHOO.util.CustomEvent.FLAT){var param=null;if(args.length>0){param=args[0];} ret=s.fn.call(scope,param,s.obj);}else{ret=s.fn.call(scope,this.type,args,s.obj);} if(false===ret){if(!this.silent){} return false;}}} return true;},unsubscribeAll:function(){},_delete:function(index){},toString:function(){}};YAHOO.util.Subscriber=function(fn,obj,override){this.fn=fn;this.obj=obj||null;this.override=override;};YAHOO.util.Subscriber.prototype.getScope=function(defaultScope){if(this.override){if(this.override===true){return this.obj;}else{return this.override;}} return defaultScope;};if(!YAHOO.util.Event){YAHOO.util.Event=function(){var loadComplete=false;var DOMReady=false;var listeners=[];var unloadListeners=[];var legacyEvents=[];var legacyHandlers=[];var retryCount=0;var onAvailStack=[];var legacyMap=[];var counter=0;var lastError=null; return{POLL_RETRYS:200,POLL_INTERVAL:10,EL:0,TYPE:1,FN:2,WFN:3,OBJ:3,ADJ_SCOPE:4,isSafari:(/KHTML/gi).test(navigator.userAgent),webkit:function(){}(),isIE:(!this.webkit&&!navigator.userAgent.match(/opera/gi)&&navigator.userAgent.match(/msie/gi)),_interval:null,startInterval:function(){},onAvailable:function(p_id,p_fn,p_obj,p_override){},onDOMReady:function(p_fn,p_obj,p_override){},onContentReady:function(p_id,p_fn,p_obj,p_override){},addListener:function(el,sType,fn,obj,override){ if(this._isValidCollection(el)){}else if("unload"==sType&&obj!==this){unloadListeners[unloadListeners.length]=[el,sType,fn,obj,override];return true;} var scope=el;if(override){if(override===true){scope=obj;}else{scope=override;}} var wrappedFn=function(e){return fn.call(scope,YAHOO.util.Event.getEvent(e),obj);};var li=[el,sType,fn,wrappedFn,scope];var index=listeners.length;listeners[index]=li;if(this.useLegacyEvent(el,sType)){var legacyIndex=this.getLegacyIndex(el,sType);if(legacyIndex==-1||el!=legacyEvents[legacyIndex][0]){legacyIndex=legacyEvents.length;legacyMap[el.id+sType]=legacyIndex;legacyEvents[legacyIndex]=[el,sType,el["on"+sType]];legacyHandlers[legacyIndex]=[];el["on"+sType]=function(e){YAHOO.util.Event.fireLegacyEvent(YAHOO.util.Event.getEvent(e),legacyIndex);};} legacyHandlers[legacyIndex].push(li);}else{try{this._simpleAdd(el,sType,wrappedFn,false);}catch(ex){this.lastError=ex;this.removeListener(el,sType,fn);return false;}}},fireLegacyEvent:function(e,legacyIndex){},getLegacyIndex:function(el,sType){},useLegacyEvent:function(el,sType){},removeListener:function(el,sType,fn){},getTarget:function(ev,resolveTextNode){var t=ev.target||ev.srcElement;return this.resolveTextNode(t);},resolveTextNode:function(node){if(node&&3==node.nodeType){return node.parentNode;}else{return node;}},getPageX:function(ev){},getPageY:function(ev){},getXY:function(ev){},getRelatedTarget:function(ev){},getTime:function(ev){},stopEvent:function(ev){},stopPropagation:function(ev){},preventDefault:function(ev){},getEvent:function(e){var ev=e||window.event; return ev;},getCharCode:function(ev){},_getCacheIndex:function(el,sType,fn){ return-1;},generateId:function(el){},_isValidCollection:function(o){},elCache:{},getEl:function(id){},clearCache:function(){},DOMReadyEvent:new YAHOO.util.CustomEvent("DOMReady",this),_load:function(e){},_ready:function(e){},_tryPreloadAttach:function(){ this.locked=false;return true;},purgeElement:function(el,recurse,sType){var elListeners=this.getListeners(el,sType);},getListeners:function(el,sType){var results=[],searchLists; if(!sType){searchLists=[listeners,unloadListeners];}else return(results.length)?results:null;},_unload:function(e){},_getScrollLeft:function(){},_getScrollTop:function(){return this._getScroll()[0];},_getScroll:function(){var dd=document.documentElement,db=document.body;if(dd&&(dd.scrollTop||dd.scrollLeft)){return[dd.scrollTop,dd.scrollLeft];}else if(db){return[db.scrollTop,db.scrollLeft];}else{return[0,0];}},regCE:function(){},_simpleAdd:function(){if(window.addEventListener){return function(el,sType,fn,capture){el.addEventListener(sType,fn,(capture));};}else if(window.attachEvent){return function(el,sType,fn,capture){el.attachEvent("on"+sType,fn);};}else{return function(){};}}(),_simpleRemove:function(){if(window.removeEventListener){return function(el,sType,fn,capture){el.removeEventListener(sType,fn,(capture));};}else if(window.detachEvent){return function(el,sType,fn){el.detachEvent("on"+sType,fn);};}else{return function(){};}}()};}();(function(){var EU=YAHOO.util.Event;EU.on=EU.addListener;})();} YAHOO.util.Connect={_msxml_progid:['MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'],_http_headers:{},_has_http_headers:false,_use_default_post_header:true,_default_post_header:'application/x-www-form-urlencoded; charset=UTF-8',_use_default_xhr_header:true,_default_xhr_header:'XMLHttpRequest',_has_default_headers:true,_default_headers:{},_isFormSubmit:false,_isFileUpload:false,_formNode:null,_sFormData:null,_poll:{},_timeOut:{},_polling_interval:50,_transaction_id:0,_submitElementValue:null,_hasSubmitListener:(function(){if(YAHOO.util.Event){YAHOO.util.Event.addListener(document,'click',function(e){var obj=YAHOO.util.Event.getTarget(e);if(obj.type=='submit'){YAHOO.util.Connect._submitElementValue=encodeURIComponent(obj.name)+"="+encodeURIComponent(obj.value);}}) return true;} return false;})(),setProgId:function(id){this._msxml_progid.unshift(id);},setDefaultPostHeader:function(b){this._use_default_post_header=b;},setDefaultXhrHeader:function(b){this._use_default_xhr_header=b;},setPollingInterval:function(i){if(typeof i=='number'&&isFinite(i)){this._polling_interval=i;}},createXhrObject:function(transactionId){var obj,http;try{http=new XMLHttpRequest();obj={conn:http,tId:transactionId};} catch(e){for(var i=0;i<this._msxml_progid.length;++i){try{http=new ActiveXObject(this._msxml_progid[i]);obj={conn:http,tId:transactionId};break;} catch(e){}}} var uploadCallback=function(){ setTimeout(function(){document.body.removeChild(io);},100);};if(YAHOO.util.Event){YAHOO.util.Event.addListener(io,"load",uploadCallback);} else if(window.attachEvent){io.attachEvent('onload',uploadCallback);} else{io.addEventListener('load',uploadCallback,false);}},abort:function(o,callback,isTimeout){},isCallInProgress:function(o){},releaseObject:function(o){o.conn=null;o=null;}}; YAHOO.register("connection",YAHOO.util.Connect,{version:"2.2.2",build:"204"}); YAHOO.util.Anim=function(el,attributes,duration,method){if(el){this.init(el,attributes,duration,method);}}; YAHOO.util.Anim.prototype={toString:function(){},patterns:{},doMethod:function(attr,start,end){},setAttribute:function(attr,val,unit){},getAttribute:function(attr){},getDefaultUnit:function(attr){},setRuntimeAttribute:function(attr){var start;var end;var attributes=this.attributes;this.runtimeAttributes[attr]={};var isset=function(prop){return(typeof prop!=='undefined');}; start=(isset(attributes[attr]['from']))?attributes[attr]['from']:this.getAttribute(attr);if(isset(attributes[attr]['to'])){end=attributes[attr]['to'];}else if(isset(attributes[attr]['by'])){if(start.constructor==Array){end=[];for(var i=0,len=start.length;i<len;++i){end[i]=start[i]+attributes[attr]['by'][i];}}else{end=start+attributes[attr]['by'];}} this.runtimeAttributes[attr].start=start;this.runtimeAttributes[attr].end=end;this.runtimeAttributes[attr].unit=(isset(attributes[attr].unit))?attributes[attr]['unit']:this.getDefaultUnit(attr);},init:function(el,attributes,duration,method){var isAnimated=false;var startTime=null;var actualFrames=0;el=YAHOO.util.Dom.get(el);this.attributes=attributes||{};this.duration=duration||1;this.method=method||YAHOO.util.Easing.easeNone;this.useSeconds=true;this.currentFrame=0;this.totalFrames=YAHOO.util.AnimMgr.fps;this.getEl=function(){return el;};this.isAnimated=function(){return isAnimated;};this.getStartTime=function(){return startTime;};this.runtimeAttributes={};this.animate=function(){if(this.isAnimated()){return false;} this.currentFrame=0;this.totalFrames=(this.useSeconds)?Math.ceil(YAHOO.util.AnimMgr.fps*this.duration):this.duration;YAHOO.util.AnimMgr.registerElement(this);};this.stop=function(finish){if(finish){this.currentFrame=this.totalFrames;this._onTween.fire();} YAHOO.util.AnimMgr.stop(this);};var onStart=function(){this.onStart.fire();this.runtimeAttributes={};for(var attr in this.attributes){this.setRuntimeAttribute(attr);} isAnimated=true;actualFrames=0;startTime=new Date();};var onTween=function(){var data={duration:new Date()-this.getStartTime(),currentFrame:this.currentFrame};data.toString=function(){};this.onTween.fire(data);var runtimeAttributes=this.runtimeAttributes;for(var attr in runtimeAttributes){this.setAttribute(attr,this.doMethod(attr,runtimeAttributes[attr].start,runtimeAttributes[attr].end),runtimeAttributes[attr].unit);} actualFrames+=1;};var onComplete=function(){var actual_duration=(new Date()-startTime)/1000;var data={duration:actual_duration,frames:actualFrames,fps:actualFrames/actual_duration};data.toString=function(){return('duration: '+data.duration+', frames: '+data.frames+', fps: '+data.fps);};isAnimated=false;actualFrames=0;this.onComplete.fire(data);};this._onStart=new YAHOO.util.CustomEvent('_start',this,true);this.onStart=new YAHOO.util.CustomEvent('start',this);this.onTween=new YAHOO.util.CustomEvent('tween',this);this._onTween=new YAHOO.util.CustomEvent('_tween',this,true);this.onComplete=new YAHOO.util.CustomEvent('complete',this);this._onComplete=new YAHOO.util.CustomEvent('_complete',this,true);this._onStart.subscribe(onStart);this._onTween.subscribe(onTween);this._onComplete.subscribe(onComplete);}};YAHOO.util.AnimMgr=new function(){var thread=null;var queue=[];var tweenCount=0;this.fps=1000;this.delay=1;this.registerElement=function(tween){queue[queue.length]=tween;tweenCount+=1;tween._onStart.fire();this.start();};this.unRegister=function(tween,index){tween._onComplete.fire();index=index||getIndex(tween);if(index!=-1){queue.splice(index,1);} tweenCount-=1;if(tweenCount<=0){this.stop();}};this.start=function(){if(thread===null){thread=setInterval(this.run,this.delay);}};this.stop=function(tween){if(!tween){clearInterval(thread);for(var i=0,len=queue.length;i<len;++i){if(queue[0].isAnimated()){this.unRegister(queue[0],0);}}queue=[];thread=null;tweenCount=0;} else{this.unRegister(tween);}};this.run=function(){for(var i=0,len=queue.length;i<len;++i){var tween=queue[i];if(!tween||!tween.isAnimated()){continue;} if(tween.currentFrame<tween.totalFrames||tween.totalFrames===null){tween.currentFrame+=1;if(tween.useSeconds){correctFrame(tween);} tween._onTween.fire();} else{YAHOO.util.AnimMgr.stop(tween,i);}}};var getIndex=function(anim){ return-1;};var correctFrame=function(tween){var frames=tween.totalFrames;var frame=tween.currentFrame;var expected=(tween.currentFrame*tween.duration*1000/tween.totalFrames);var elapsed=(new Date()-tween.getStartTime());var tweak=0;if(elapsed<tween.duration*1000){tweak=Math.round((elapsed/expected-1)*tween.currentFrame);}else{tweak=frames-(frame+1);} if(tweak>0&&isFinite(tweak)){ tween.currentFrame+=tweak;}};};(function(){YAHOO.util.ColorAnim=function(el,attributes,duration,method){YAHOO.util.ColorAnim.superclass.constructor.call(this,el,attributes,duration,method);};YAHOO.extend(YAHOO.util.ColorAnim,YAHOO.util.Anim);var Y=YAHOO.util;var superclass=Y.ColorAnim.superclass;var proto=Y.ColorAnim.prototype;proto.toString=function(){var el=this.getEl();var id=el.id||el.tagName;return("ColorAnim "+id);};proto.patterns.color=/color$/i;proto.patterns.rgb=/^rgb$([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)$$/i;proto.patterns.hex=/^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;proto.patterns.hex3=/^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i;proto.patterns.transparent=/^transparent|rgba$0, 0, 0, 0$$/;})(); YAHOO.util.Easing={easeNone:function(t,b,c,d){return c*t/d+b;}};(function(){YAHOO.util.Scroll=function(el,attributes,duration,method){if(el){YAHOO.util.Scroll.superclass.constructor.call(this,el,attributes,duration,method);}};YAHOO.extend(YAHOO.util.Scroll,YAHOO.util.ColorAnim);var Y=YAHOO.util;var superclass=Y.Scroll.superclass;var proto=Y.Scroll.prototype;proto.toString=function(){var el=this.getEl();var id=el.id||el.tagName;return("Scroll "+id);};proto.doMethod=function(attr,start,end){var val=null;if(attr=='scroll'){val=[this.method(this.currentFrame,start[0],end[0]-start[0],this.totalFrames),this.method(this.currentFrame,start[1],end[1]-start[1],this.totalFrames)];}else{val=superclass.doMethod.call(this,attr,start,end);} return val;};proto.getAttribute=function(attr){var val=null;var el=this.getEl();if(attr=='scroll'){val=[el.scrollLeft,el.scrollTop];}else{val=superclass.getAttribute.call(this,attr);} return val;};proto.setAttribute=function(attr,val,unit){var el=this.getEl();if(attr=='scroll'){el.scrollLeft=val[0];el.scrollTop=val[1];}else{superclass.setAttribute.call(this,attr,val,unit);}};})(); TB={}; TB.common={trim:function(str){return str.replace(/(^\s*)|(\s*$)/g,'');},escapeHTML:function(str){var div=document.createElement('div');var text=document.createTextNode(str);div.appendChild(text);return div.innerHTML;},unescapeHTML:function(str){var div=document.createElement('div');div.innerHTML=str.replace(/<\/?[^>]+>/gi,'');return div.childNodes[0]?div.childNodes[0].nodeValue:'';},toArray:function(list,start){var array=[];for(var i=start||0;i<list.length;i++){array[array.length]=list[i];} return array;},applyConfig:function(obj,config){if(obj&&config&&typeof config=='object'){for(var p in config){if(!YAHOO.lang.hasOwnProperty(obj,p)) obj[p]=config[p];}} return obj;}}; TB.widget={};(function(){var Y=YAHOO.util;TB.widget.Slide=function(container,config){this.init(container,config);} TB.widget.Slide.defConfig={slidesClass:'Slides',triggersClass:'SlideTriggers',currentClass:'Current',eventType:'click',autoPlayTimeout:5,disableAutoPlay:false};TB.widget.Slide.prototype={init:function(container,config){this.container=Y.Dom.get(container);this.config=TB.common.applyConfig(config||{},TB.widget.Slide.defConfig);try{this.slidesUL=Y.Dom.getElementsByClassName(this.config.slidesClass,'ul',this.container)[0];this.slides=this.slidesUL.getElementsByTagName('li');}catch(e){throw new Error("can't find slides!");} this.delayTimeId=null;this.autoPlayTimeId=null;this.curSlide=-1;this.sliding=false;this.pause=false;this.onSlide=new Y.CustomEvent("onSlide",this,false,Y.CustomEvent.FLAT);if(YAHOO.lang.isFunction(this.config.onSlide)){this.onSlide.subscribe(this.config.onSlide,this,true);} this.initSlides();this.initTriggers();if(this.slides.length>0) this.play(1);if(!this.config.disableAutoPlay){this.autoPlay();}},initTriggers:function(){var ul=document.createElement('ul');this.container.appendChild(ul);for(var i=0;i<this.slides.length;i++){var li=document.createElement('li');li.innerHTML=i+1;ul.appendChild(li);} ul.className=this.config.triggersClass;this.triggersUL=ul;if(this.config.eventType=='mouse'){Y.Event.on(this.triggersUL,'mouseover',this.mouseHandler,this,true);Y.Event.on(this.triggersUL,'mouseout',function(e){clearTimeout(this.delayTimeId);},this,true);}else{Y.Event.on(this.triggersUL,'click',this.clickHandler,this,true);}},initSlides:function(){Y.Event.on(this.slides,'mouseover',function(){this.pause=true;},this,true);Y.Event.on(this.slides,'mouseout',function(){this.pause=false;},this,true);Y.Dom.setStyle(this.slides,'display','none');},clickHandler:function(e){var t=Y.Event.getTarget(e);var idx=parseInt(t.innerHTML);while(t!=this.container){if(t.nodeName.toUpperCase()=="LI"){if(!this.sliding){this.play(idx,true);} break;}else{t=t.parentNode;}}},mouseHandler:function(e){var t=Y.Event.getTarget(e);var idx=parseInt(t.innerHTML);while(t!=this.container){if(t.nodeName.toUpperCase()=="LI"){var self=this;this.delayTimeId=setTimeout(function(){self.play(idx,true);},(self.sliding?.5:.1)*1000);break;}else{t=t.parentNode;}}},play:function(n,flag){n=n-1;if(n==this.curSlide)return;var curSlide=this.curSlide>=0?this.curSlide:0;if(flag&&this.autoPlayTimeId) clearInterval(this.autoPlayTimeId);var triggersLis=this.triggersUL.getElementsByTagName('li');triggersLis[curSlide].className='';triggersLis[n].className=this.config.currentClass;this.slide(n);this.curSlide=n;if(flag&&!this.config.disableAutoPlay) this.autoPlay();},slide:function(n){var curSlide=this.curSlide>=0?this.curSlide:0;this.sliding=true;Y.Dom.setStyle(this.slides[curSlide],'display','none');Y.Dom.setStyle(this.slides[n],'display','block');this.sliding=false;this.onSlide.fire(n);},autoPlay:function(){var self=this;var callback=function(){if(!self.pause&&!self.sliding){var n=(self.curSlide+1)%self.slides.length+1;self.play(n,false);}} this.autoPlayTimeId=setInterval(callback,this.config.autoPlayTimeout*1000);}} TB.widget.ScrollSlide=function(container,config){this.init(container,config);} YAHOO.extend(TB.widget.ScrollSlide,TB.widget.Slide,{initSlides:function(){TB.widget.ScrollSlide.superclass.initSlides.call(this);Y.Dom.setStyle(this.slides,'display','');},slide:function(n){var curSlide=this.curSlide>=0?this.curSlide:0;var args={scroll:{by:[0,this.slidesUL.offsetHeight*(n-curSlide)]}};var anim=new Y.Scroll(this.slidesUL,args,.5,Y.Easing.easeOutStrong);anim.onComplete.subscribe(function(){this.sliding=false;this.onSlide.fire(n);},this,true);anim.animate();this.sliding=true;}});TB.widget.FadeSlide=function(container,config){this.init(container,config);} YAHOO.extend(TB.widget.FadeSlide,TB.widget.Slide,{initSlides:function(){TB.widget.FadeSlide.superclass.initSlides.call(this);Y.Dom.setStyle(this.slides,'position','absolute');Y.Dom.setStyle(this.slides,'top',this.config.slideOffsetY||0);Y.Dom.setStyle(this.slides,'left',this.config.slideOffsetX||0);Y.Dom.setStyle(this.slides,'z-index',1);},slide:function(n){if(this.curSlide==-1){Y.Dom.setStyle(this.slides[n],'display','block');}else{var curSlideLi=this.slides[this.curSlide];Y.Dom.setStyle(curSlideLi,'display','block');Y.Dom.setStyle(curSlideLi,'z-index',10);var fade=new Y.Anim(curSlideLi,{opacity:{to:0}},.5,Y.Easing.easeNone);fade.onComplete.subscribe(function(){Y.Dom.setStyle(curSlideLi,'z-index',1);Y.Dom.setStyle(curSlideLi,'display','none');Y.Dom.setStyle(curSlideLi,'opacity',1);this.sliding=false;this.onSlide.fire(n);},this,true);Y.Dom.setStyle(this.slides[n],'display','block');fade.animate();this.sliding=true;}}});})();TB.widget.SimpleSlide=new function(){this.decorate=function(container,config){if(!container)return;config=config||{};if(config.effect=='scroll'){if(navigator.product&&navigator.product=='Gecko'){if(YAHOO.util.Dom.get(container).getElementsByTagName('iframe').length>0){new TB.widget.Slide(container,config);return;}} new TB.widget.ScrollSlide(container,config);} else if(config.effect=='fade'){new TB.widget.FadeSlide(container,config);} else{new TB.widget.Slide(container,config);}}} </script> <div id="MPB"><div id="SlidePlayer"> <ul class="Slides"> <li><A title="天极网软件频道2007年热点专题回放" href="http://www.webjx.com/"><img src="/article/UploadPic/20082/20/200822083044800.jpg" alt="网页教学网2007年热点专题回放"></A></li><li><A title="完全解析Windows XP SP3的最新特性" href="http://www.webjx.com/"><img src="/article/UploadPic/20082/20/200822083044240.jpg" alt="完全解析Windows XP SP3的最新特性"></A></li><li><A title="视频转换宝典在手视频格式想转就转不求人" href="http://www.webjx.com/"><img src="/article/UploadPic/20082/20/200822083044527.jpg" alt="视频转换宝典在手视频格式想转就转不求人"></A></li><li><A title="3DsMAX专区全新上线" href="http://www.webjx.com/"><img src="/article/UploadPic/20082/20/200822083045844.jpg" alt="3DsMAX专区全新上线"></A></li><li><A title="谁适合你？各大安全工具最新版功能比拼" href="http://www.webjx.com/"><img src="/article/UploadPic/20082/20/200822083045639.jpg" alt="谁适合你？各大安全工具最新版功能比拼"></A></li> <li><a title="2007中国IT网络调查火热进行中" href="http://www.webjx.com/"><img src="/article/UploadPic/20082/20/200822083045145.jpg" alt="2007中国IT网络调查火热进行中" border="0"></a></li> </ul> </div></div> <script type="text/javascript"> TB.widget.SimpleSlide.decorate('SlidePlayer', {eventType:'mouse', effect:'scroll'}); </script> </body> </html> [提示：你可先修改部分代码，再按运行]

另外提供两个需要下载的图片:

http://www.aspxhome.com/article/UploadPic/20082/20/200822083043320.gif

http://www.aspxhome.com/article/UploadPic/20082/20/200822083044654.gif

【加入收藏】【报告错误】【投递文章】【复制地址】【返回顶部↑】

本文地址：http://www.aspxhome.com/javascript/jsmagic/20082/306920.htm

站长工具

请稍等，评论加载中...

热门点击排行今日点击排行本周点击排行本月点击排行最新访问排行热门评论排行

符合网站标准的图片切换代码(天极软件)

Aspxhome.com. 中国Asp之家. 版权所有