<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript仿2010世博会主页flash焦点图片</title> <mce:style type="text/css"><!-- *{border:0;margin:0;border:0;list-style:none;} body{padding:20px;background:#eee;} #focus_change{width:450px;height:296px;position:relative;overflow:hidden;font-family:Verdana, Arial, Helvetica, sans-serif;background:#fff;} #loading{position:absolute;z-index:9999;width:450px;height:296px;background:#fff url(/jscss/demoimg/loading.gif) center -40px no-repeat;color:#666;font-size:12px;text-align:center;padding-top:90px;} #ts_bg{position:absolute;bottom:0;z-index:1;width:450px;height:36px;background:#000;filter:alpha(opacity=40);opacity:0.4;} #pics li{position:absolute;top:0px;left:0px;} #pics li img{filter:alpha(opacity=0);opacity:0;width:450px;height:296px;}/*图片大小与框架保持一致*/ #ts li{position:absolute;z-index:2;left:0;bottom:-32px;height:32px;line-height:32px;font-size:14px;font-weight:bold;padding-left:16px;} #ts li a{color:#fff; text-decoration:none;}/*标题链接样式*/ #btn,#btn_bg{position:absolute;z-index:3;bottom:8px;right:8px;color:#fff;font-size:12px;} #btn li,#btn_bg li{float:left;width:22px;height:18px;line-height:18px;overflow:hidden;text-align:center;margin-right:1px;} #btn_bg li{background:#fff;filter:alpha(opacity=50);opacity:0.5;} #btn li.current {background:#F60;} --></mce:style><style type="text/css" mce_bogus="1">*{border:0;margin:0;border:0;list-style:none;} body{padding:20px;background:#eee;} #focus_change{width:450px;height:296px;position:relative;overflow:hidden;font-family:Verdana, Arial, Helvetica, sans-serif;background:#fff;} #loading{position:absolute;z-index:9999;width:450px;height:296px;background:#fff url(/jscss/demoimg/loading.gif) center -40px no-repeat;color:#666;font-size:12px;text-align:center;padding-top:90px;} #ts_bg{position:absolute;bottom:0;z-index:1;width:450px;height:36px;background:#000;filter:alpha(opacity=40);opacity:0.4;} #pics li{position:absolute;top:0px;left:0px;} #pics li img{filter:alpha(opacity=0);opacity:0;width:450px;height:296px;}/*图片大小与框架保持一致*/ #ts li{position:absolute;z-index:2;left:0;bottom:-32px;height:32px;line-height:32px;font-size:14px;font-weight:bold;padding-left:16px;} #ts li a{color:#fff; text-decoration:none;}/*标题链接样式*/ #btn,#btn_bg{position:absolute;z-index:3;bottom:8px;right:8px;color:#fff;font-size:12px;} #btn li,#btn_bg li{float:left;width:22px;height:18px;line-height:18px;overflow:hidden;text-align:center;margin-right:1px;} #btn_bg li{background:#fff;filter:alpha(opacity=50);opacity:0.5;} #btn li.current {background:#F60;}</style> <mce:script type="text/javascript"><!-- function $(id) {return document.getElementById(id);} function $$(tag,id){return (id==undefined?document:this.$(id)).getElementsByTagName(tag);} function poptit(tsID,n){//文字上下运动函数 var ts = $$('li',tsID); var setway=function(obj,y){obj.style.bottom=y+'px';} var getway=function(obj){return parseInt(obj.style.bottom);} var up=function(){ if (ts[n].movement) clearTimeout(ts[n].movement);//为了兼容变化中的点击 if (y1 == 0) return true; y1+=Math.ceil((0 - y1) / 5); setway(ts[n],y1); if(y1<0) ts[n].movement = setTimeout(up, 1); } var down=function(){ if (ts[N].movement) clearTimeout(ts[N].movement); if (y2 == -32) return true; y2+=Math.floor((-32 - y2) / 5); setway(ts[N],y2); if(y2>-32) ts[N].movement = setTimeout(down, 1); } for(var i=0;i<ts.length;i++){ if (!ts[i].style.bottom) ts[i].style.bottom = "-32px"; if(ts[i].name=='up') var N=i; } if(!N&&n==0) {//开始载入... ts[n].name='up'; var y1=getway(ts[n]); up(); return true; } if(N==n) return true;//防止快速移出移入的抖动 ts[N].name=''//标记淡入的name为空 ts[n].name='up'; var y1=getway(ts[n]); var y2=getway(ts[N]); down(); up(); } function opa(pics,n){//图片淡入淡出函数 var pics = $$('img',pics); var setfade=function(obj,o){ if (document.all) obj.style.filter = "alpha(opacity=" + o + ")"; else obj.style.opacity = (o / 100); }; var getfade=function(obj){ return (document.all)?((obj.filters.alpha.opacity)?obj.filters.alpha.opacity:false):((obj.style.opacity)?obj.style.opacity*100:false); } var show=function(){ if(pics[n].move) clearTimeout(pics[n].move); if (o1 == 100) return true; o1+=5; setfade(pics[n],o1); if(o1<100) pics[n].move=setTimeout(show,1); }; var hide=function(){ if(pics[N].move) clearTimeout(pics[N].move); if (o2 == 0) return true; o2-=5; setfade(pics[N],o2); if(o2>0) pics[N].move=setTimeout(hide,1); }; for(var i=0;i<pics.length;i++){ if(!getfade(pics[i])) setfade(pics[i],0); if(pics[i].name=='out') var N=i; } if(!N&&n==0) {//开始载入... pics[n].name='out'; var o1=getfade(pics[n]); show(); return true; } if(N==n) return true; pics[N].name='' pics[n].name='out'; var o1=getfade(pics[n]); var o2=getfade(pics[N]); hide(); show(); } function classNormal() {//数字标签样式清除 var focusBtnList = $$('li','btn'); for (var i = 0; i < focusBtnList.length; i++) { focusBtnList[i].className = ''; } } function autoFocusChange() {//自动运行 if (atuokey) return; var focusBtnList = $$('li','btn'); for (var i = 0; i < focusBtnList.length; i++) { if (focusBtnList[i].className == 'current') { var currentNum = i; } } if(currentNum<focusBtnList.length-1){ poptit('ts',currentNum+1); opa('pics',currentNum+1); classNormal(); focusBtnList[currentNum+1].className = 'current'; }else if(currentNum==focusBtnList.length-1){ poptit('ts',0); opa('pics',0); classNormal(); focusBtnList[0].className = 'current'; } } function focusChange() {//交互切换 var focusBtnList = $$('li','btn'); for (var i = 0; i < focusBtnList.length; i++) { focusBtnList[i].I=i; focusBtnList[i].onclick = function(){ poptit('ts',this.I); opa('pics',this.I); classNormal(); focusBtnList[this.I].className = 'current'; } focusBtnList[i].onmouseover = function(){ this.style.backgroundColor='#f60'; this.style.cursor='pointer'; } focusBtnList[i].onmouseout = function(){ this.style.backgroundColor=''; } } } var atuokey = ''; function init(){//初始化 $('btn_bg').innerHTML=$('btn').innerHTML; $('focus_change').removeChild($$('div','focus_change')[0]); poptit('ts',0); opa('pics',0); classNormal(); $$('li','btn')[0].className = 'current'; $('focus_change').onmouseover = function() { atuokey = true; clearInterval(auto); } $('focus_change').onmouseout = function() { atuokey = false; auto=setInterval('autoFocusChange()', T); } } var T=3000;//每帧图片停留的时间,1000=1秒 var auto=''; window.οnlοad=function(){ init(); focusChange(); auto=setInterval('autoFocusChange()', T); } // --></mce:script> </head> <body> <div id="focus_change"> <div id="loading">请稍候...</div> <div id="ts_bg">文字标题的背景</div> <div id="btn_bg">数字标签的背景</div> <div id="pics"> <ul> <li><a href="#" mce_href="#"><img src="/jscss/demoimg/wall2.jpg" mce_src="jscss/demoimg/wall2.jpg" alt="^_^" /></a></li> <li><a href="#" mce_href="#"><img src="/jscss/demoimg/wall3.jpg" mce_src="jscss/demoimg/wall3.jpg" alt="^_^" /></a></li> <li><a href="#" mce_href="#"><img src="/jscss/demoimg/wall4.jpg" mce_src="jscss/demoimg/wall4.jpg" alt="^_^" /></a></li> <li><a href="#" mce_href="#"><img src="/jscss/demoimg/wall5.jpg" mce_src="jscss/demoimg/wall5.jpg" alt="^_^" /></a></li> </ul> </div> <div id="ts"> <ul> <li><a href="#" mce_href="#">使用简单,只需修改html内容和样式</a></li> <li><a href="#" mce_href="#">自定义框架(图片)大小,标题当然也可调</a></li> <li><a href="#" mce_href="#">也可以添加更多的帧/图片,无需修改JS代码</a></li> <li><a href="#" mce_href="#">怎样,使用是不是太简单了?</a></li> </ul> </div> <div id="btn"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </div> </body> </html> 原文地址:http://www.codefans.net/jscss/code/1874.shtml