图片轮流上下显示的JS效果

作者：闪电儿来源：网页教学网

由XHTML+CSS+JS实现的模拟flash的图片轮翻滚动代码,可以设置滚动时间间隔以及为每张图片增加不同的链接与说明文字,出处为网页教学网

<html>
<head>
<title>网页设计手册websbook.com</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(http://www.webjx.com/files/080105/1_140742.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(http://www.webjx.com/files/080105/1_140755.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="/" _fcksavedurl="http://www.webjx.com/"><img src="http://www.webjx.com/files/080105/1_01321TA.jpg" _fcksavedurl="http://www.webjx.com/files/080105/1_01321TA.jpg" alt="网页教学网2007年热点专题回放"></A></li><li><A title="完全解析Windows XP SP3的最新特性" href="/" _fcksavedurl="http://www.webjx.com/"><img src="http://www.webjx.com/files/080104/1_150543119.jpg" _fcksavedurl="http://www.webjx.com/files/080104/1_150543119.jpg" alt="完全解析Windows XP SP3的最新特性"></A></li><li><A title="视频转换宝典在手 视频格式想转就转不求人" href="/" _fcksavedurl="http://www.webjx.com/"><img src="http://www.webjx.com/files/080103/1_224351309.jpg" _fcksavedurl="http://www.webjx.com/files/080103/1_224351309.jpg" alt="视频转换宝典在手 视频格式想转就转不求人"></A></li><li><A title="3DsMAX专区全新上线" href="/" _fcksavedurl="http://www.webjx.com/"><img src="http://www.webjx.com/files/080103/1_22204C61.jpg" _fcksavedurl="http://www.webjx.com/files/080103/1_22204C61.jpg" alt="3DsMAX专区全新上线"></A></li><li><A title="谁适合你？各大安全工具最新版功能比拼" href="/" _fcksavedurl="http://www.webjx.com/"><img src="http://www.webjx.com/files/080102/1_0T012Y8.jpg" _fcksavedurl="http://www.webjx.com/files/080102/1_0T012Y8.jpg" alt="谁适合你？各大安全工具最新版功能比拼"></A></li>
<li><a title="2007中国IT网络调查 火热进行中" href="/" _fcksavedurl="http://www.webjx.com/"><img src="http://www.webjx.com/files/litimg/071031/00261514R3.jpg" _fcksavedurl="http://www.webjx.com/files/litimg/071031/00261514R3.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://bbs.websbook.com/viewthread.php?tid=1511&page=1&extra=page%3D1