仿2010世博会主页焦点flash js代码实现经典幻灯片效果

本次更新对比旧版本精简了一半以上的代码（可以对比一下），强烈推荐喜欢的朋友更新。
如果说之前版本仿2010世博会flash的仿似度是90%，那么本次更新的仿似度则达到了99%，则是说几乎是一摸一样的（欢迎大家挑刺^_^）
其实本次更新只是日后将要发布的myFocus焦点图库的一款样式，也算是其发布前的一次预热吧，呵呵~~
总之，即将发布的myFocus正式版值得大家期待~~^^

7.5更新的代码：

<!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 v0.8</title> 
<style type="text/css"> 
*{margin:0;padding:0;border:0;list-style:none;} 
body{background:#eee;padding:20px;} 
.mF_expo2010{position:relative;width:450px;height:296px;overflow:hidden;font:12px/1.5 Verdana,Geneva,sans-serif;background:#fff;} 
.mF_expo2010 .loading{position:absolute;z-index:9999;width:100%;height:100%;color:#666;text-align:center;padding-top:90px;background:#fff url(http://nethd.zhongsou.com/wtimg/i_158290/15250-loading.gif) center -40px no-repeat;}/*载入画面*/ 
.mF_expo2010 .pic li{position:absolute;} 
.mF_expo2010 .pic li img{width:450px;height:296px;}/*图片和焦点图框架一样大小*/ 
.mF_expo2010 .txt li{position:absolute;z-index:2;left:0;width:450px;height:36px;line-height:36px;overflow:hidden;} 
.mF_expo2010 .txt li a{display:block;color:#fff;padding:2px 0 0 16px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/ 
.mF_expo2010 .txt-bg{position:absolute;bottom:0;z-index:1;width:450px;height:36px;overflow:hidden;background:#000;filter:alpha(opacity=40);opacity:0.4;}/*标题背景*/ 
.mF_expo2010 .num,.mF_expo2010 .num-bg{position:absolute;z-index:3;bottom:8px;right:8px;color:#fff;}/*按钮样式*/ 
.mF_expo2010 .num li,.mF_expo2010 .num-bg li{float:left;width:22px;height:18px;line-height:18px;overflow:hidden;text-align:center;margin-right:1px;cursor:pointer;} 
.mF_expo2010 .num-bg li{background:#fff;filter:alpha(opacity=50);opacity:0.5;}/*按钮背景*/ 
.mF_expo2010 .num li.current,.mF_expo2010 .num li.hover{background:#F60;}/*当前/悬停按钮背景*/ 
</style> 
<script type="text/javascript"> 
var myFocus={ 
    //Design By Koen @ 2010.7.x 
    //http://hi.baidu.com/koen_li 
    //koen_lee@qq.com 
    $:function(id){return document.getElementById(id);}, 
    $$:function(tag,obj){return (typeof obj=='object'?obj:this.$(obj)).getElementsByTagName(tag);}, 
    linear:function(t,b,c,d){return c*t/d + b;}, 
    easeIn:function(t,b,c,d){return c*(t/=d)*t*t*t + b;}, 
    easeOut:function(t,b,c,d){return -c*((tt=t/d-1)*t*t*t - 1) + b;}, 
    opa:function(obj,v){ 
        if(v!=undefined) {vv=v>100?100:(v<0?0:v); obj.style.filter = "alpha(opacity=" + v + ")"; obj.style.opacity = (v / 100);} 
        else return (document.all)?((obj.filters.alpha)?obj.filters.alpha.opacity:100):((obj.style.opacity)?obj.style.opacity*100:100); 
    }, 
    move:function(obj,dir,val,type,spd,fn){ 
        var t=0,b=parseInt(obj.style[dir])||0,c=val-b,d=spd||50,st=type||'linear',m=c>0?'ceil':'floor'; 
        if(obj[dir+'timer']) clearInterval(obj[dir+'timer']); 
        obj[dir+'timer']=setInterval(function(){ 
            if(t<d){obj.style[dir]=Math[m](myFocus[st](t++,b,c,d))+'px';} 
            else {clearInterval(obj[dir+'timer']);fn&&fn.call(myFocus);} 
        },10);return this; 
    }, 
    fade:function(obj,type,spd,fn){ 
        var o=this.opa(obj),m=spd||5; 
        if(o==0) obj.style.display=''; 
        if(type=='out') m=-m; 
        if(obj.fadeTimer) clearInterval(obj.fadeTimer); 
        obj.fadeTimer=setInterval(function(){ 
            o+=m;myFocus.opa(obj,o); 
            if(o<=0) obj.style.display='none'; 
            if(o>=100||o<=0){clearInterval(obj.fadeTimer);fn&&fn.call(myFocus);} 
        },10);return this; 
    }, 
    addList:function(obj,cla,arr){ 
        var s=[],n=this.$$('li',this.$$('ul',obj)[0]).length,num=cla.length; 
        for(var j=0;j<num;j++){ 
            s.push('<ul class='+cla[j]+'>'); 
            for(var i=0;i<n;i++){s.push('<li>'+(cla[j]=='num'?(i+1):(cla[j]=='txt'?this.$$('li',obj)[i].innerHTML.replace(/\<img.*?\>/i,this.$$('img',obj)[i].alt):''))+'<span></span></li>')}; 
            s.push('</ul>'); 
        }; obj.innerHTML+=s.join(''); 
    }, 
    setting:function(par){//设置DOM/文档加载就绪后执行的任务 
        if(window.attachEvent){window.attachEvent('onload',function(){myFocus[par.style](par)});} 
　　      else{window.addEventListener('load',function(){myFocus[par.style](par)},false);} 
    }, 
    mF_expo2010:function(par){ 
        var box=this.$(par.id),t=par.time*1000; 
        this.addList(box,['txt-bg','txt','num-bg','num']); 
        var pic=this.$$('ul',box)[0],txt=this.$$('ul',box)[2],num=this.$$('ul',box)[4],img=this.$$('li',pic),tip=this.$$('li',txt); 
        var H=tip[0].clientHeight+60; 
        var n=img.length; 
        var index=0; 
        for(var i=0;i<img.length;i++){this.opa(img[i],0); img[i].style.display='none'; tip[i].style.bottom=-H+'px'} 
        box.removeChild(this.$$('div',box)[0]); 
        this.fade(img[index],'in'); 
        this.move(tip[index],'bottom',0,'easeOut',40) 
        this.$$('li',num)[index].className='current'; 
        var run=function(idx){ 
            myFocus.fade(img[index],'out'); 
            myFocus.move(tip[index],'bottom',-H,'easeIn',10); 
            myFocus.$$('li',num)[index].className=''; 
            if(index==n-1) index=-1; 
            var N=idx!=undefined?idx:index+1; 
            myFocus.fade(img[N],'in'); 
            myFocus.move(tip[N],'bottom',0,'easeOut',40); 
            myFocus.$$('li',num)[N].className='current'; 
            index=N; 
        } 
        var auto=setInterval(function(){run()},t); 
        for (var j=0;j<n;j++){ 
            this.$$('li',num)[j].j=j; 
            this.$$('li',num)[j].onclick=function(){run(this.j)} 
            this.$$('li',num)[j].onmouseover=function(){if(!this.className) this.className = 'hover';} 
            this.$$('li',num)[j].onmouseout=function(){if(this.className=='hover') this.className ='';} 
        } 
        box.onmouseover=function(){clearInterval(auto);} 
        box.onmouseout=function(){auto=setInterval(function(){run()},t);} 
    } 
} 
myFocus.setting({style:'mF_expo2010',id:'myFocus',time:2});//style为风格样式，id为焦点图ID，time为每帧间隔时间(秒) 
//之后推出的myFocus正式版将会有更多的样式、更强大的效果及更详细的文档描述，敬请期待!^_^  
</script> 
</head> 
<body> 
<div id="myFocus" class="mF_expo2010"> 
    <div class="loading"><span>请稍候...</span></div><!--载入画面--> 
    <ul class="pic"><!--内容列表--> 
        <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="图片1来源于网络，版权属于作者" /></a></li><!--alt的内容为标题--> 
        <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> 
</body> 
</html>

===========原贴============

不知大家发现没有，最近腾讯有关的网站焦点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;//每帧图片停留的时间，11000=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><!--alt的内容为标题--> 
        <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结构如下：

<div id="myFocus"><!--焦点图容器ID--> 
  <div class="loading">请稍候...</div><!--载入画面--> 
  <div class="pics"><!--焦点图内容--> 
    <ul> 
      <li><a href="#"><img src="#" alt="图片1来源于网络，版权属于作者" /></a></li><!--alt的内容为标题--> 
      <li><a href="#"><img src="#" alt="图片2来源于网络，版权属于作者" /></a></li> 
      <li><a href="#"><img src="#" alt="图片3来源于网络，版权属于作者" /></a></li> 
      <li><a href="#"><img src="#" alt="图片4来源于网络，版权属于作者" /></a></li> 
    </ul> 
  </div> 
</div>

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

标签: 2010世博会焦点fl js特效幻灯片经典幻灯片代码

首页

仿2010世博会主页焦点flash js代码实现经典幻灯片效果

猜您也喜欢...

热门TagS