仿2010世博会主页焦点flash（5.13更新）

不知大家发现没有，最近腾讯有关的网站焦点flash都是类似2010上海世博主页的那种格式，而且百度贴吧主页也做成了这样的格式，貌似很流行哦？。。遗憾的是它们都是flash做的，或是基于jquery库/IE滤镜(只模仿了渐变)，找遍网络好像都找不到我想要的JS格式，只好自己动手做一个。看效果（已更新，共4款）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <base href="http://hi.baidu.com/koen_li"> <title>JS仿2010世博会主页焦点flash V2.1</title> <style type="text/css"> *{margin:0;padding:0;border:0;list-style:none;} body{padding:20px;background:#eee;} #myFocus{width:450px;height:296px;position:relative;overflow:hidden;font-family:Verdana, Arial, Helvetica, sans-serif;background:#fff;}/*焦点图大小，可按需要是否加边框*/ #myFocus .loading{position:absolute;z-index:9999;width:450px;height:296px;background:#fff url(http://nethd.zhongsou.com/wtimg/i_158290/15250-loading.gif) center -40px no-repeat;color:#666;font-size:12px;text-align:center;padding-top:90px;}/*载入画面*/ #myFocus .pics li{position:absolute;top:0px;left:0px;} #myFocus .pics li img{filter:alpha(opacity=0);opacity:0;width:450px;height:296px;}/*图片大小*/ #myFocus .ts li{position:absolute;z-index:2;left:0;bottom:-32px;height:32px;line-height:32px;padding-left:16px;overflow:hidden;} #myFocus .ts li a{color:#fff;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/ #myFocus .tsBg{position:absolute;bottom:0;z-index:1;width:450px;height:36px;background:#000;filter:alpha(opacity=40);opacity:0.4;}/*标题背景*/ #myFocus .btn,#myFocus .btnBg{position:absolute;z-index:3;bottom:8px;right:8px;color:#fff;font-size:12px;}/*按钮样式*/ #myFocus .btn li,#myFocus .btnBg li{float:left;width:22px;height:18px;line-height:18px;overflow:hidden;text-align:center;margin-right:1px;cursor:pointer;} #myFocus .btnBg li{background:#fff;filter:alpha(opacity=50);opacity:0.5;}/*按钮背景*/ #myFocus .btn li.current,#myFocus .btn li.hover {background:#F60;}/*当前/悬停按钮背景*/ </style> <script type="text/javascript"> /*design by koen @ 10nian5yue8ri*/ /*http://hi.baidu.com/koen_li*/ function setMyFocus(ID,t){//主函数... function $(id) {return document.getElementById(id);} function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);} function poptit(n){//文字上下运动函数 var ts = $$('li',tit); var H = ts[n].clientHeight; var setway=function(obj,y){obj.style.bottom=y+'px';} var getway=function(obj){return parseInt(obj.style.bottom);} var y1,y2; var up=function(){ y1=getway(ts[n]); 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(){ y2=getway(ts[N]); if (ts[N].movement) clearTimeout(ts[N].movement); if (y2 == -H) return true; y2+=Math.floor((-H - y2) / 5); setway(ts[N],y2); if(y2>-H) ts[N].movement = setTimeout(down, 1); } for(var i=0;i<ts.length;i++){ if (!ts[i].style.bottom) ts[i].style.bottom = -H+'px'; 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'; down(); up(); } function opa(n){//图片淡入淡出函数 var pics = $$('img',pic); 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)?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); pics[n].move=setTimeout(show,1); }; var hide=function(){ if(pics[N].move) clearTimeout(pics[N].move); if (o2 <= 0) {pics[N].style.display='none';return true;} o2-=5; setfade(pics[N],o2); pics[N].move=setTimeout(hide,1); }; for(var i=0;i<pics.length;i++){ if(!getfade(pics[i])) {setfade(pics[i],0);pics[i].style.display='none';} if(pics[i].name=='out') var N=i; } if(!N&&n==0) {//开始载入... pics[n].name='out'; pics[n].style.display=''; var o1=getfade(pics[n]); show(); return true; } if(N==n) return true; pics[N].name='' pics[n].name='out'; pics[n].style.display=''; 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(currentNum+1); opa(currentNum+1); classNormal(); focusBtnList[currentNum+1].className = 'current'; }else if(currentNum==focusBtnList.length-1){ poptit(0); opa(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(this.I); opa(this.I); classNormal(); focusBtnList[this.I].className = 'current'; } focusBtnList[i].onmouseover = function(){ if(!this.className) this.className = 'hover' } focusBtnList[i].onmouseout = function(){ if(this.className=='hover') this.className =''; } } } function init(){//初始化 $(ID).removeChild($$('div',ID)[2]); opa(0); poptit(0); classNormal(); $$('li',$$('div',ID)[4])[0].className = 'current'; $(ID).onmouseover = function() { atuokey = true; clearInterval(auto); } $(ID).onmouseout = function() { atuokey = false; auto=setInterval(autoFocusChange, T); } } var ul=$$('ul',ID)[0]; var li=$$('li',ul); var NUM=li.length; var s1='<div class="tsBg"></div><div class="btnBg"><ul>';for(var i=0;i<NUM;i++){s1+='<li></li>'};s1+='</ul></div>'; var s2='<div class="ts"><ul>'; for(var i=0;i<NUM;i++){var a=$$('a',li[i])[0];var img=$$('img',li[i])[0];s2+='<li><a href="'+a.href+'">'+img.alt+'</a></li>'};s2+='</ul></div>'; var s3='<div class="btn"><ul>'; for(var i=0;i<NUM;i++){s3+='<li>'+(i+1)+'</li>'};s3+='</ul></div>'; $(ID).innerHTML=s1+$(ID).innerHTML+s2+s3; //生成HTML结束 var pic=$$('div',ID)[3]; var tit=$$('div',ID)[4]; var btn=$$('div',ID)[5]; var atuokey = ''; var auto=''; var T=t*1000;//每帧图片停留的时间，1000=1秒 init(); focusChange(); auto=setInterval(autoFocusChange, T); } window.onload=function(){ setMyFocus('myFocus',3) } </script> </head> <body> <div id="myFocus"> <div class="loading">请稍候...</div> <div class="pics"> <ul> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="图片1来源于网络，版权属于作者" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="图片2来源于网络，版权属于作者" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="图片3来源于网络，版权属于作者" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="图片4，更多精彩请点击进入我的空间^^" /></a></li> </ul> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

因为本人JS水平有限，制作过程遇到很多问题都是通过搜索或在这里提问，后来发现原来论坛早已有人做过类似的：http://bbs.blueidea.com/thread-2911266-1-3.html，但幸好，还不是完全相同的^_^。例如：朋友那个是一帧跟着一帧运动，而我这个是2帧甚至多帧的同时运动(如果你点击的足够快)，所要处理/考虑的情况比朋友那个要复杂的多，这也是代码有点多的最大原因。当然，这个开始的loading切入我是模仿这位朋友的，希望不要介意^_^。

使用说明(5.12更新)：直接复制套用或调用setMyFocus(ID,t);即可（ID为焦点容器id，t为每帧停留时间单位秒）；其余的包括更改焦点图大小、添加更多的帧或自定义样式等等只需修改HTML/CSS，无需修改参数/JS代码，如添加一帧/图片只需在HTML中增加一行“<li>(你的图片)</li>”即可。HTML结构如下：

复制内容到剪贴板

代码:

例如作一些简单的修改，就成为了模仿搜狐体育频道的样式（下面代码没有更新）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <base href="http://hi.baidu.com/koen_li"> <title>JS仿2010世博会主页焦点flash</title> <style type="text/css"> *{border:0;margin:0;border:0;list-style:none;} body{padding:20px;background:#eee;} .wrap{padding:4px;border:1px solid #ccc;background:#fff;float:left;} #focus_change{width:280px;height:350px;position:relative;overflow:hidden;font-family:Verdana, Arial, Helvetica, sans-serif;background:#fff;}/*整个框架大小，可随意更改，可按需要是否加边框*/ #loading{position:absolute;z-index:9999;width:280px;height:350px;background:#fff url(http://nethd.zhongsou.com/wtimg/i_158290/15250-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:280px;height:36px;background:#000;filter:alpha(opacity=50);opacity:0.5;} #pics li{position:absolute;top:0px;left:0px;} #pics li img{filter:alpha(opacity=0);opacity:0;width:280px;height:350px;}/*图片大小与框架保持一致*/ #ts li{position:absolute;z-index:2;left:0;bottom:-32px;width:100%;height:32px;line-height:32px;overflow:hidden;text-align:center;font-size:14px;font-weight:bold;} #ts li a{color:#fff; text-decoration:none;}/*标题链接样式*/ #btn,#btn_bg{position:absolute;z-index:3;bottom:40px;right:0px;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:4px;border:1px solid #999;} #btn_bg li{background:#000;filter:alpha(opacity=60);opacity:0.6;} #btn li.current {border:1px solid #F60;color:#F60;} </style> <script type="text/javascript"> /*design by koen @ 10nian5yue8ri*/ /*http://hi.baidu.com/koen_li*/ 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.onload=function(){ init(); focusChange(); auto=setInterval('autoFocusChange()', T); } </script> </head> <body> <div class="wrap"> <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="#"><img src="http://nethd.zhongsou.com/wtimg/i_158290/15253-1.jpg" alt="更多精彩内容请进入我的空间^_^" /></a></li> <li><a href="#"><img src="http://nethd.zhongsou.com/wtimg/i_158290/15254-2.jpg" alt="更多精彩内容请进入我的空间^_^" /></a></li> <li><a href="#"><img src="http://nethd.zhongsou.com/wtimg/i_158290/15255-3.jpg" alt="更多精彩内容请进入我的空间^_^" /></a></li> <li><a href="#"><img src="http://nethd.zhongsou.com/wtimg/i_158290/15256-4.jpg" alt="更多精彩内容请进入我的空间^_^" /></a></li> <li><a href="#"><img src="http://nethd.zhongsou.com/wtimg/i_158290/15252-5.jpg" alt="更多精彩内容请进入我的空间^_^" /></a></li> <li><a href="#"><img src="http://nethd.zhongsou.com/wtimg/i_158290/15255-3.jpg" alt="更多精彩内容请进入我的空间^_^" /></a></li> </ul> </div> <div id="ts"> <ul> <li><a href="#">使用简单，只需修改html内容和样式</a></li> <li><a href="#">自定义框架(图片)大小，标题当然也可调</a></li> <li><a href="#">也可以添加更多的帧/图片，无需修改JS代码</a></li> <li><a href="#">怎样，使用是不是太简单了？</a></li> <li><a href="#">欢迎提出批评、建议、改进</a></li> <li><a href="#">欢迎围观、学习、模仿</a></li> </ul> </div> <div id="btn"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

以上代码皆兼容包括IE系列、火狐系列、谷歌系列等现代浏览器，细心的网友可能会发现其在各个浏览器中运行速度不同，其中谷歌、某些版本的火狐运行比较快、而IE8、某些版本的火狐运行慢一些，而我这个是在IE6中测试和作标准的，这个问题已经开帖请教经典论坛里的达人：http://bbs.blueidea.com/thread-2983483-1-2.html，但目前似乎没有解决的办法，如果朋友们有什么好的解决方案或程序发现什么bug、or进一步的优化代码，欢迎提出^_^

[ 本帖最后由 KOEN301 于 2010-6-5 22:33 编辑 ]

作者: KOEN301 发布时间: 2010-05-08

这是一款黑色的风格，一起贴到这里好了，方便找，原帖:http://bbs.blueidea.com/thread-2983873-1-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <base href="http://hi.baidu.com/koen_li"> <title>黑色风格的JS焦点图</title> <style type="text/css"> *{margin:0;padding:0;border:0;list-style:none;} body{padding:20px;background:#eee;} #myfocus{width:450px;height:296px;overflow:hidden;padding:6px 6px 24px;background:#333 url(http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg) no-repeat;position:relative;} #myfocus #myloading{position:absolute;top:0;left:0;z-index:9999;width:462px;height:326px;background:#333;color:#f60;font-size:12px;text-align:center;padding-top:90px;} #myfocus #myloading .bg{position:absolute;top:0;left:0;z-index:-1;}/*载入画面*/ #myfocus .pics{width:450px;height:296px;overflow:hidden;position:relative;} #myfocus .pics ul{height:296px;position:absolute;} #myfocus .pics ul li{width:450px;height:296px;float:left;position:relative;}/*图片大小450px*296px*/ #myfocus .pics ul li div,#myfocus .pics ul li div span,#myfocus .pics ul li div a{display:block;position:absolute;bottom:0;left:0;width:100%;height:34px;} #myfocus .pics ul li div span{filter:alpha(opacity=50);opacity: 0.5;background:#000;}/*文字标题的背景样式*/ #myfocus .pics ul li div a{line-height:34px;overflow:hidden;padding-left:16px;text-decoration:none;font-size:14px;color:#fff;font-weight:bold;}/*文字标题样式*/ #myfocus .mybtn{position:absolute;bottom:8px;right:8px;} #myfocus .mybtn ul li{float:left;width:16px;height:6px;margin-left:4px;overflow:hidden;border:1px solid #000;background:#ccc;cursor:pointer;} #myfocus .mybtn ul li.current{background:#f60;} </style> <script type="text/javascript"> /*design by koen @ 10nian5yue11ri*/ /*http://hi.baidu.com/koen_li*/ function setFocus(ID,t){//主函数... function $(id) {return document.getElementById(id);} function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);} var n='';//标记 function showPics(num){ if(n===num) return true; if(n==='') n=0; else n=num; var pics=$$('ul',ID)[0]; var tit=$$('div',pics)[num]; if (!pics.style.left){pics.style.left = 0+'px';} if (!tit.style.bottom||parseInt(tit.style.bottom)>-34){tit.style.bottom = -34+'px';} var endX=-num*$$('div',ID)[0].clientWidth; var goimg=function(){ X=parseInt(pics.style.left); if (pics.movement){clearTimeout(pics.movement);} if(parseInt(pics.style.left)==endX) return true; if((endX-X)>0) X+=Math.ceil((endX-X) / 10); else X+=Math.floor((endX-X) / 10); pics.style.left=X+'px'; pics.movement = setTimeout(goimg, 5); } var gotit=function(){ var y=parseInt(tit.style.bottom); if (tit.movement){clearTimeout(tit.movement);} if(y==0) return true; y+=Math.ceil((0-y) / 10); if(parseInt(pics.style.left)==endX) tit.style.bottom=y+'px'; if(y<0) tit.movement = setTimeout(gotit, 16); } goimg(); gotit(); } function classNormal() {//数字标签样式清除 var focusBtnList = $$('li',$$('ul',ID)[1]); for (var i = 0; i < focusBtnList.length; i++) { focusBtnList[i].className = ''; } } function focusChange() {//交互切换 var focusBtnList = $$('li',$$('ul',ID)[1]); for (var i = 0; i < focusBtnList.length; i++) { focusBtnList[i].I=i; focusBtnList[i].onmouseover = function(){ showPics(this.I); classNormal(); focusBtnList[this.I].className = 'current'; } } } var autoFocusChange=function() {//自动运行 if (atuokey) return; var focusBtnList = $$('li',$$('ul',ID)[1]); for (var i = 0; i < focusBtnList.length; i++) { if (focusBtnList[i].className == 'current') { var currentNum = i; } } if(currentNum<focusBtnList.length-1){ showPics(currentNum+1); classNormal(); focusBtnList[currentNum+1].className = 'current'; }else if(currentNum==focusBtnList.length-1){ showPics(0); classNormal(); focusBtnList[0].className = 'current'; } } var atuokey = ''; function init(){//初始化<div><span></span><a href="#">文字说明</a></div> var ul=$$('ul',ID)[0]; var li=$$('li',ul); var NUM=li.length; var wid=$('myloading')?$$('div',ID)[1].clientWidth:$$('div',ID)[0].clientWidth;ul.style.width=wid*NUM+'px'; for(var i=0;i<NUM;i++){ var a=li[i].getElementsByTagName('a')[0]; var img=li[i].getElementsByTagName('img')[0]; li[i].innerHTML=li[i].innerHTML+'<div><span></span><a href="'+a+'">'+img.alt+'</a></div>'; } var s='<div class="mybtn"><ul>'; for(var i=0;i<NUM;i++){s+='<li></li>'} s+='</ul></div>'; $(ID).innerHTML+=s; $(ID).removeChild($('myloading')); showPics(0); classNormal(); $$('li',$$('ul',ID)[1])[0].className = 'current'; $(ID).onmouseover = function() { atuokey = true; clearInterval(auto); } $(ID).onmouseout = function() { atuokey = false; auto=setInterval(autoFocusChange, T); } } var T=t*1000;//每帧图片停留的时间，1000=1秒 var auto=''; init(); focusChange(); auto=setInterval(autoFocusChange, T); }; window.onload=function(){ setFocus('myfocus',4); } </script> </head> <body> <div id="myfocus"> <div id="myloading">请稍候...<br /><br /><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051020541820883.gif" /><img class="bg" src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100511/2010051111200423950.jpg" /></div> <div class="pics"> <ul> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="图片1来源于网络，版权属于作者" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="图片2来源于网络，版权属于作者" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="图片3来源于网络，版权属于作者" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018052886494.jpg" alt="图片4来源于网络，版权属于作者" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="图片5来源于网络，版权属于作者" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018061333534.jpg" alt="图片6来源于网络，版权属于作者" /></a></li> </ul> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

一款淘宝商城的~~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <base href="http://hi.baidu.com/koen_li"> <title>#myfocus</title> <style type="text/css"> *{margin:0;padding:0;border:0;list-style:none;} body{padding:20px;background:#fff;color:#333;font-size:12px;} #myFocus{width:946px;height:337px;position:relative;overflow:hidden;font-family:Verdana, Arial, Helvetica, sans-serif;}/*焦点图大小，可按需要是否加边框*/ #myFocus .loading{position:absolute;z-index:9999;color:#fff;width:100%;height:100%;text-align:center;padding-top:90px;background:#666;}/*载入画面*/ #myFocus .pics ul{width:100%;height:306px;}/*图片高*/ #myFocus .pics ul li{position:absolute;width:100%;height:306px;} #myFocus .pics ul li img{width:100%;height:100%;} #myFocus .ts{width:944px;height:29px;border:1px solid #dedede;overflow:hidden;}/*文字宽高*/ #myFocus .ts ul{width:945px;height:29px;line-height:29px;} #myFocus .ts ul li{float:left;width:186px;height:26px;border-right:1px solid #dedede;padding:1px;overflow:hidden;} #myFocus .ts ul li a{display:block;padding-left:10px;width:178px;color:#333;text-decoration:none;background:#f1f1f1;} #myFocus .ts ul li a.current{background:#aaa;color:#fff;font-weight:bold;} </style> <SCRIPT type=text/javascript> /*design by koen @ 10nian5yue8ri*/ /*http://hi.baidu.com/koen_li*/ function setMyFocus(ID,t){//主函数... function $(id) {return document.getElementById(id);} function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);} function opa(n){//图片淡入淡出函数 var pics = $$('img',pic); 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)?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+=10; setfade(pics[n],o1); pics[n].move=setTimeout(show,5); }; var hide=function(){ if(pics[N].move) clearTimeout(pics[N].move); if (o2 <= 0) {pics[N].style.display='none';return true;} o2-=10; setfade(pics[N],o2); pics[N].move=setTimeout(hide,5); }; for(var i=0;i<pics.length;i++){ if(!getfade(pics[i])) {setfade(pics[i],0);pics[i].style.display='none';} if(pics[i].name=='out') var N=i; } if(!N&&n==0) {//开始载入... pics[n].name='out'; pics[n].style.display=''; var o1=getfade(pics[n]); show(); return true; } if(N==n) return true; pics[N].name='' pics[n].name='out'; pics[n].style.display=''; var o1=getfade(pics[n]); var o2=getfade(pics[N]); hide(); show(); } function classNormal() {//数字标签样式清除 var a = $$('a',tit); for (var i = 0; i < a.length; i++) { a[i].className = ''; } } function autoFocusChange() {//自动运行 if (atuokey) return; var a = $$('a',tit); for (var i = 0; i < a.length; i++) { if (a[i].className == 'current') { var currentNum = i; } } if(currentNum<a.length-1){ opa(currentNum+1); classNormal(); a[currentNum+1].className = 'current'; }else if(currentNum==a.length-1){ opa(0); classNormal(); a[0].className = 'current'; } } function focusChange() {//交互切换 var a = $$('a',tit); for (var i = 0; i < a.length; i++) { a[i].I=i; a[i].onmouseover = function(){ opa(this.I); classNormal(); a[this.I].className = 'current'; } } } function init(){//初始化 $(ID).removeChild($$('div',ID)[0]); opa(0); $$('a',tit)[0].className = 'current'; $(ID).onmouseover = function() { atuokey = true; clearInterval(auto); } $(ID).onmouseout = function() { atuokey = false; auto=setInterval(autoFocusChange, T); } } var pic=$$('div',ID)[1]; var tit=$$('div',ID)[2]; var atuokey = ''; var auto=''; var T=t*1000;//每帧图片停留的时间，1000=1秒 init(); focusChange(); auto=setInterval(autoFocusChange, T); } window.onload=function(){ setMyFocus('myFocus',3) } </SCRIPT> </head> <body> <div id="myFocus"> <div class="loading">请稍候...<br /><br /><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051020541820883.gif" /></div> <div class="pics"> <ul> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="1" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="2" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="3" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="4" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018061333534.jpg" alt="5" /></a></li> </ul> </div> <div class='ts'> <ul> <li><a href="http://hi.baidu.com/koen_li#">1、来源于网络，版权属于作者</a></li> <li><a href="http://hi.baidu.com/koen_li#">2、来源于网络，版权属于作者</a></li> <li><a href="http://hi.baidu.com/koen_li#">3、来源于网络，版权属于作者</a></li> <li><a href="http://hi.baidu.com/koen_li#">4、来源于网络，版权属于作者</a></li> <li><a href="http://hi.baidu.com/koen_li#">5、更多精彩请点击进入我的空间^^</a></li> </ul> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

有时间会把所有流行的效果集中发出来，谢谢大家的支持~~

[ 本帖最后由 KOEN301 于 2010-6-4 13:16 编辑 ]

作者: KOEN301 发布时间: 2010-05-09

是不是也参照了zuozuo的？

作者: tangbin1987 发布时间: 2010-05-09

引用:

原帖由 tangbin1987 于 2010-5-9 09:50 发表
是不是也参照了zuozuo的？

zuozuo??可以给个链接吗？如果说到参照，我是从这帖子开始学习的(上面的图片也是用了这贴

)：http://bbs.blueidea.com/thread-2882621-1-1.html，本来昨晚发了此帖(即带略缩图)的一个优化改进版，后来发现存在不少bug，删了^_^

[ 本帖最后由 KOEN301 于 2010-5-9 10:08 编辑 ]

作者: KOEN301 发布时间: 2010-05-09

哦，是佐佐。我在他个人网站上看过

作者: tangbin1987 发布时间: 2010-05-09

引用:

原帖由 tangbin1987 于 2010-5-9 10:18 发表
哦，是佐佐。我在他个人网站上看过

。。。肯定不是的哦，即使相似也方法不同，如果真的参照了别人的作品或思路(其实我也找不到)，我一定会标明、附带传送门^_^

作者: KOEN301 发布时间: 2010-05-09

这个可是好东西，真不错。谢谢楼主分享

作者: lzl777 发布时间: 2010-05-09

搜索进了朋友说的佐佐个人网站，找了好久，终于找到一个相似的http://byzuo.com/demo/focus_turn_upgrade/index.html，但又很不相似，不知朋友看出了没^_^ 不过从前面的作品看，无疑他也是个高手，谢谢推荐

作者: KOEN301 发布时间: 2010-05-09

第二个看上去有点怪...

作者: 8yong8 发布时间: 2010-05-09

引用:

原帖由 8yong8 于 2010-5-9 12:35 发表
第二个看上去有点怪...

那个只是示范，如果你懂CSS，那么样式完全可以自己调节

作者: KOEN301 发布时间: 2010-05-09

谁知道哪个比较好用的相册可以引用图片到别处展示？百度、网易等都不行，失望~~~

作者: KOEN301 发布时间: 2010-05-09

不错就全局太多了

作者: hotcrab2008 发布时间: 2010-05-09

引用:

原帖由 hotcrab2008 于 2010-5-9 14:03 发表
不错就全局太多了

确实考虑过这个问题，只是我没有向封装这方面作出尝试，不过现在很多网站都是通过iframe来内置这些类似的焦点图，而且SEO也建议这么做，所以这也觉得没什么了。如果有人愿意花一点时间把它们封装起来当然我也很乐意

。

作者: KOEN301 发布时间: 2010-05-09

不错,谢谢楼主了

作者: iaw2001200 发布时间: 2010-05-09

正是我想要的。。。收藏

作者: jgs1982 发布时间: 2010-05-09

这个特别在哪里啊？这类焦点FLASH很早就见过了啊。

作者: shw3588 发布时间: 2010-05-11

引用:

原帖由 shw3588 于 2010-5-11 11:55 发表
这个特别在哪里啊？这类焦点FLASH很早就见过了啊。

拜托，我这个是JS，不是flash。上面已经说的很清楚了。

作者: KOEN301 发布时间: 2010-05-11

时间有问题每次都是连跳两个

作者: 755816 发布时间: 2010-05-11

引用:

原帖由 KOEN301 于 2010-5-11 12:16 发表

拜托，我这个是JS，不是flash。上面已经说的很清楚了。

呃，我的错。楼主加油，纯JS的我也做过，自己遇到的问题就是只能用淡出淡入，做不了flash下的其它效果，像卷页，拼图，这些。

作者: shw3588 发布时间: 2010-05-11

作者: yappy2000 发布时间: 2010-05-11

为什么复制你的代码运行，会显示‘filters' is null or not an object.??

作者: cwq2jxl 发布时间: 2010-05-11

收了..谢谢楼主

作者: Blazers 发布时间: 2010-05-11

引用:

原帖由 cwq2jxl 于 2010-5-11 15:13 发表
为什么复制你的代码运行，会显示‘filters' is null or not an object.??

可能是你的css样式设置不对？不是很清楚你的状况

作者: KOEN301 发布时间: 2010-05-11

引用:

原帖由 shw3588 于 2010-5-11 14:51 发表

呃，我的错。楼主加油，纯JS的我也做过，自己遇到的问题就是只能用淡出淡入，做不了flash下的其它效果，像卷页，拼图，这些。

一起学习

其实做这个耗了我不少精力，看似简单，但实际中遇到的问题真的非常多，特别是多个对象存在一起运动的情况，还要考虑中断的情况。。。如果滑动切换设置为onmouseover就很容易看出来了。
有时间的话大家可以一起交流

作者: KOEN301 发布时间: 2010-05-11

引用:

原帖由 755816 于 2010-5-11 14:42 发表
时间有问题每次都是连跳两个

请问这个bug是在什么情况下出现？
前期制作中我也遇到这样的bug，但现在应该不存在才对呀。。。
有空再改进一下。。。。

作者: KOEN301 发布时间: 2010-05-11

引用:

原帖由 KOEN301 于 2010-5-11 17:04 发表

可能是你的css样式设置不对？不是很清楚你的状况

我只是复制了你的代码，放进EditPlus里运行了下，就爆了- -！~还想学习学习来着。。

作者: cwq2jxl 发布时间: 2010-05-11

引用:

原帖由 cwq2jxl 于 2010-5-11 17:16 发表

我只是复制了你的代码，放进EditPlus里运行了下，就爆了- -！~还想学习学习来着。。

如果把代码全部复制（包括HTML），那应该是没问题的，代码我一般是放到谷歌浏览器或火狐的浏览器测试的，EditPlus没用过。。。

作者: KOEN301 发布时间: 2010-05-11

感觉很普通没什么特别之处

作者: cielkong 发布时间: 2010-05-11

我想说真的很好看，谢谢分享

作者: EvenChen 发布时间: 2010-05-11

很漂亮收藏了，谢谢

作者: lyj4532556 发布时间: 2010-05-12

引用:

原帖由 KOEN301 于 2010-5-11 17:21 发表

如果把代码全部复制（包括HTML），那应该是没问题的，代码我一般是放到谷歌浏览器或火狐的浏览器测试的，EditPlus没用过。。。

我在FF和IETESTER里测试了下，IE6不兼容请高手修改下

作者: cwq2jxl 发布时间: 2010-05-12

真不错，希望楼主能把它封装成JQUERY插件。

作者: togoog 发布时间: 2010-05-12

谢谢朋友们的支持，已经更新

作者: KOEN301 发布时间: 2010-05-12

引用:

原帖由 cwq2jxl 于 2010-5-12 08:37 发表

我在FF和IETESTER里测试了下，IE6不兼容请高手修改下

我就是以IE6作预览的。。。。不知其他人是不是也出现不兼容情况？

作者: KOEN301 发布时间: 2010-05-12

引用:

原帖由 togoog 于 2010-5-12 10:52 发表
真不错，希望楼主能把它封装成JQUERY插件。

我是新手，JQUERY正在学习中。。。

作者: KOEN301 发布时间: 2010-05-12

不错，收了！谢谢！！！

作者: howardvictor 发布时间: 2010-05-12

引用:

原帖由 KOEN301 于 2010-5-12 15:31 发表

我就是以IE6作预览的。。。。不知其他人是不是也出现不兼容情况？

直接在IE6下运行是好的，但是全选复制你的代码进Editplus就诡异的报错- -！你的程序跟它有仇么？

作者: cwq2jxl 发布时间: 2010-05-12

能大概讲下原理或对js部分做下注释就更有利于新手了~~

当然，这个效果非常不错~

作者: xiaotian_s 发布时间: 2010-05-12

好东西，先收藏起！

作者: zk295346515 发布时间: 2010-05-12

引用:

原帖由 cwq2jxl 于 2010-5-12 17:31 发表

直接在IE6下运行是好的，但是全选复制你的代码进Editplus就诡异的报错- -！你的程序跟它有仇么？

极有可能是人品问题。。。

作者: KOEN301 发布时间: 2010-05-12

引用:

原帖由 xiaotian_s 于 2010-5-12 17:52 发表
能大概讲下原理或对js部分做下注释就更有利于新手了~~

当然，这个效果非常不错~

嗯。。。其实清楚了里面的htm/css结构是很容易看懂我的代码的，本来我代码水平就不高，呵呵。还有里面函数的功能也注释的很清楚哦，耐心点看应该很容易理解的

作者: KOEN301 发布时间: 2010-05-12

越看觉得那个黑色风格很漂亮啊，但为什么原帖那么少人顶呢？郁闷。

作者: KOEN301 发布时间: 2010-05-12

黑色的确实漂亮

但点击的地方有点小

美观但不方便

作者: Blazers 发布时间: 2010-05-12

留名顶起

作者: lishaojun95272 发布时间: 2010-05-13

引用:

原帖由 KOEN301 于 2010-5-12 23:04 发表

极有可能是人品问题。。。

最近RP还不错的说。。可能你这控件和Editplus不兼容- -？

作者: cwq2jxl 发布时间: 2010-05-13

非常喜欢。。把CSS都封装了。直接拿来调用就可以。谢谢楼主哦。

作者: wangsdong 发布时间: 2010-05-13

LZ打一个包吧

作者: gujizhen 发布时间: 2010-05-13

5.13更新了部分细节：
1、CSS现在可以方便单独定义按钮的hover样式；
2、CSS现在可以方便更改标题的高度，即文字现在可以方便在任意幅度内上升/下降。
3、修正了图片的alt显示不正确的标题。

作者: KOEN301 发布时间: 2010-05-13

回复 43# 谢谢提醒，如果有更好的方案会改进下
回复 45# Editplus没用过，我用DW，在GC/FF中crlt+shift+J测试

回复 47# 不是多大的文件哦，如果真需要那下回再整理下

作者: KOEN301 发布时间: 2010-05-13

求教下楼主说 "修正了图片的alt显示不正确的标题"

我网站用了楼主的代码但问题依然存在啊？

还有一个问题：当打开幻灯网页再浏览别的网页时，再次切换回幻灯网页，会出现幻灯标题重叠的问题

详情:70538.cn 首页左侧幻灯

[ 本帖最后由 Blazers 于 2010-5-13 15:18 编辑 ]

作者: Blazers 发布时间: 2010-05-13

引用:

原帖由 Blazers 于 2010-5-13 15:02 发表
求教下楼主说 "修正了图片的alt显示不正确的标题"

我网站用了楼主的代码但问题依然存在啊？

还有一个问题：当打开幻灯网页再浏览别的网页时，再次切换回幻灯网页，会出现幻灯标题重叠的问题

详情:70538. ...

你用的那个是没有更新的（第二个）。。。请用我更新后的代码（第一个），样式可以按照那个修改回来，主要是我偷懒不好意思哈~~

作者: KOEN301 发布时间: 2010-05-13

原来如此是我用错了

再次感谢楼主

作者: Blazers 发布时间: 2010-05-13

收藏，LZ的这个好棒

作者: 小寒发布时间: 2010-05-13

不错啊，是个很好的幻灯哦，不再用FLASH了。谢谢啊，收藏了

作者: liuypyy 发布时间: 2010-05-13

很漂亮的！

作者: abxiechengjun 发布时间: 2010-05-13

很漂亮，只是代码多了点

作者: wyc668 发布时间: 2010-05-13

引用:

原帖由 wyc668 于 2010-5-13 18:54 发表
很漂亮，只是代码多了点

嗯，欢迎大家优化

[ 本帖最后由 KOEN301 于 2010-5-13 20:17 编辑 ]

作者: KOEN301 发布时间: 2010-05-13

引用:

原帖由 wyc668 于 2010-5-13 18:54 发表
很漂亮，只是代码多了点

期待优化...

作者: Blazers 发布时间: 2010-05-13

好是再加上过度效果就好

作者: zrphm128 发布时间: 2010-05-19

很炫收藏下

作者: cl2006 发布时间: 2010-05-19

第三个加了个背景，很喜欢，谢谢LZ

作者: kyllen 发布时间: 2010-05-20

漂亮的一塌糊涂。。。

作者: yadan 发布时间: 2010-05-20

真的不错,很漂亮....藏之,

作者: ayan2006 发布时间: 2010-05-20

看看了

作者: kinglku 发布时间: 2010-05-20

很期待JQ版的。。

:D

作者: wangsdong 发布时间: 2010-05-20

谢谢楼主，第一个效果正是我想要的！

作者: yanzi1614 发布时间: 2010-05-21

这个是我做的：
http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html

作者: RobinQu 发布时间: 2010-05-21

好东西。

作者: kkhkkh 发布时间: 2010-05-21

挺不错的收藏啦!

作者: golbz 发布时间: 2010-05-21

我和老外的中式婚礼，大家提提意见！

http://www.51hongzhuang.com
http://www.dhunyan.com
中式婚礼
中式礼服婚宴酒店婚礼跟拍

作者: hongzhuang 发布时间: 2010-05-21

第一个效果以前就有人写过了，好象叫《Javascript仿flash焦点图片》的。
其中
/*
power by: http://www.wxwdesign.cn
*/
应该是作者的网址。不知这个是不是你做的。
我在项目中用过，也容易修改。我再上传上来吧(由于超过上传容量，images里的图自己多复制几张，我只留一张作样版)。
原代码：

复制内容到剪贴板

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}
.loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}
.d2{width:100%;height:209px;overflow:hidden;}
.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}
.num_list span{display:inline-block;height:16px;padding-left:6px;}
img{border:0px;}
ul{display:none;}
.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}
.b2{color:#FFCC33;background-color:#FF6633;}
</style>
<script language="javascript" type="text/javascript">
/*
power by: http://www.wxwdesign.cn
*/
//主函数
var s=function(){
var interv=2000; //切换间隔时间
var interv2=30; //切换速速
var opac1=80; //文字背景的透明度
var source="fade_focus" //焦点轮换图片容器的id名称
//获取对象
function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}
function getid(id){return document.getElementById(id)};
var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);}
//控制图层透明度
function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}
//控制焦点按钮
function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}
title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);
//渐显
var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}
//渐隐
var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}
//滚动文字
var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}else if(num>0&&t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};
fadeon();
}
//初始化
window.onload=s;
</script>
<title>Javascript图片幻灯效果——wxwdesign.cn</title>
</head>
<body>
<div id="fade_focus">
<div class="loading">Loading...<br /><img src="images/v2008925193118.gif" width="100" height="100" /></div>
<ul>
   <li><a href="http://www.wxwdesign.cn" target="_blank"><img src="images/1.jpg" width="443" height="209" alt="展示图片1" /></a></li>
   <li><a href="http://www.wxwdesign.cn" target="_blank"><img src="images/2.jpg" width="443" height="209" alt="展示图片2" /></a></li>
   <li><a href="http://www.wxwdesign.cn" target="_blank"><img src="images/3.jpg" width="443" height="209" alt="展示图片3" /></a></li>
   <li><a href="http://www.wxwdesign.cn" target="_blank"><img src="images/4.jpg" width="443" height="209" alt="展示图片4" /></a></li>
</ul>
</div>
</body>
</html>

[ 本帖最后由 lwdsThrone 于 2010-5-21 14:31 编辑 ]

附件

Javascript仿flash焦点图片效果.rar (73.95 KB)

2010-5-21 14:31, 下载次数: 46

Javascript仿flash焦点图片效果

作者: lwdsThrone 发布时间: 2010-05-21

不错很漂亮留名谢谢

作者: happy200318 发布时间: 2010-05-21

71楼的已经在1楼贴过，详情请看1楼

myfocus的下步计划是(如果有时间也有热情的话)：1、用面向对象方式重新编写，优化代码；2、可传递入更多可修改的参数，修改也更方便；3、JS中封装CSS，即不用在外面再定义任何关于myfocus的样式；4、JS中封装多种效果，例如淡出淡出、上下运动等、也可以提供接口，让懂代码像插件一样插入各种效果。。。。（貌似有点遥远了- -）

先谢过各位的支持~~^^

作者: KOEN301 发布时间: 2010-05-22

灰常强大值得收藏忍不住必须顶

作者: 297227938 发布时间: 2010-05-24

不错，谢谢分享

作者: ziluotian 发布时间: 2010-05-25

我觉得不错啊。至少比我们常见的一些细节做的好多了

作者: fjlx 发布时间: 2010-05-27

很漂亮收藏了，谢谢

值的学习

作者: mslove 发布时间: 2010-05-29

谢谢，收下了！

作者: lzh9207 发布时间: 2010-05-29

很实用的功能，留下足迹