JavaScript仿flash焦点图片切换

<textarea cols="50" rows="15" name="code" class="xhtml">&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;JavaScript仿2010世博会主页flash焦点图片&lt;/title&gt;&lt;mce:style type="text/css"&gt;&lt;!--*{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;}--&gt;&lt;/mce:style&gt;&lt;style type="text/css" mce_bogus="1"&gt;*{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;}&lt;/style&gt;&lt;mce:script type="text/javascript"&gt;&lt;!--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&lt;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&gt;-32) ts[N].movement = setTimeout(down, 1);}for(var i=0;i&lt;ts.length;i++){if (!ts[i].style.bottom) ts[i].style.bottom = "-32px";if(ts[i].name=='up') var N=i;}if(!N&amp;&amp;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&lt;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&gt;0) pics[N].move=setTimeout(hide,1);};for(var i=0;i&lt;pics.length;i++){if(!getfade(pics[i])) setfade(pics[i],0);if(pics[i].name=='out') var N=i;}if(!N&amp;&amp;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 &lt; focusBtnList.length; i++) { focusBtnList[i].className = ''; }}function autoFocusChange() {//自动运行 if (atuokey) return; var focusBtnList = $$('li','btn'); for (var i = 0; i &lt; focusBtnList.length; i++) { if (focusBtnList[i].className == 'current') { var currentNum = i; } }if(currentNum&lt;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 &lt; 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.onload=function(){init();focusChange();auto=setInterval('autoFocusChange()', T);}// --&gt;&lt;/mce:script&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="focus_change"&gt;&lt;div id="loading"&gt;请稍候...&lt;/div&gt;&lt;div id="ts_bg"&gt;文字标题的背景&lt;/div&gt;&lt;div id="btn_bg"&gt;数字标签的背景&lt;/div&gt;&lt;div id="pics"&gt;&lt;ul&gt; &lt;li&gt;&lt;a href="#" mce_href="#"&gt;&lt;img src="/jscss/demoimg/wall2.jpg" mce_src="jscss/demoimg/wall2.jpg" alt="^_^" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" mce_href="#"&gt;&lt;img src="/jscss/demoimg/wall3.jpg" mce_src="jscss/demoimg/wall3.jpg" alt="^_^" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" mce_href="#"&gt;&lt;img src="/jscss/demoimg/wall4.jpg" mce_src="jscss/demoimg/wall4.jpg" alt="^_^" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" mce_href="#"&gt;&lt;img src="/jscss/demoimg/wall5.jpg" mce_src="jscss/demoimg/wall5.jpg" alt="^_^" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;div id="ts"&gt;&lt;ul&gt; &lt;li&gt;&lt;a href="#" mce_href="#"&gt;使用简单，只需修改html内容和样式&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" mce_href="#"&gt;自定义框架(图片)大小，标题当然也可调&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" mce_href="#"&gt;也可以添加更多的帧/图片，无需修改JS代码&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" mce_href="#"&gt;怎样，使用是不是太简单了？&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;div id="btn"&gt;&lt;ul&gt; &lt;li&gt;1&lt;/li&gt; &lt;li&gt;2&lt;/li&gt; &lt;li&gt;3&lt;/li&gt; &lt;li&gt;4&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</textarea>

 

原文地址:http://www.codefans.net/jscss/code/1874.shtml