javascript仿flash焦点图片效果

woshigaozhen · 发表于 2009-4-26 21:25:38

以前在网上见到过一个类似的效果，是用flash+xml实现的，自己写了一个JavaScript版本的，效果截图如下：

javascript仿flash焦点图片效果

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://www.wxwdesign.cn/Down/flash/flash_show/" />
<style type="text/css">
.content_banner{ width:541px;margin-right:10px;float:left; height:244px; overflow:hidden; background-color:#000000; position:relative;}
.content_banner .small_list{padding:4px; float:left; height:236px; width:82px; overflow:hidden;}
.content_banner .small_list a{ display:block; width:82px; height:36px; margin-bottom:4px; cursor:pointer; overflow:hidden;}
.content_banner .focus_banner{ width:443px; height:auto; overflow:hidden; float:right; padding:4px; text-align:center; color:#FFCC00; font-size:12px; line-height:30px;}
.content_banner .focus_banner .loading{color:#FFCC00; font-weight:bold; font-family:Arial, Helvetica, sans-serif,"宋体"; font-size:13px; width:100%; text-align:center; padding:30px 0px 0px;}
.content_banner ul{display:none;}
.content_banner .focus_border{ background:url(images/index_focus_arrowborder.gif); width:88px; height:36px; position:absolute; left:4px; top:4px; clear:both;}
</style>
<script language="javascript" type="text/javascript">
function getid(id){return document.getElementById(id);}
function gettag(tag,obj){if(obj){return obj.getElementsByTagName(tag)}else{return document.getElementsByTagName(tag)}}
function addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload!="function"){window.onload=func;}else{window.onload=function(){oldonload();func();}};}
function main_focus(){
if(getid("focus_banner")){
var a=gettag("a",getid("focus_banner"));
var d=gettag("div",getid("focus_banner"));
var li=gettag("li",getid("focus_banner"));
d[1].innerHTML=li[0].innerHTML+gettag("img",li[0])[0].alt;
var current=0,len,y=4,dir,opac=100,timer,timer2;
for(var i=0;i<a.length;i++){
a.index=i;
a.onclick=function(){if(this.index<current){dir=-1;}else{dir=1};len=this.index*40+4;current=this.index;clearTimeout(timer2);clearTimeout(timer);slide();timer2=setTimeout(start_auto,3000);}
}
function slide(){
if((y<len&&dir>0)||(y>len&&dir<0)){if(dir>0){y+=Math.ceil((len-y)/6);}else{y+=dir*Math.ceil((y-len)/6);};timer=setTimeout(slide,10);}else{clearTimeout(timer);fadeout();}
d[2].style.top=String(y)+"px";
}
function fadeout(){
if(opac>0){opac-=10;timer=setTimeout(fadeout,10);}else{d[1].innerHTML=li[current].innerHTML+gettag("img",li[current])[0].alt;clearTimeout(timer);fadeon();}
d[1].style.opacity=opac/100;
d[1].style.filter="alpha(opacity="+opac+")";
}
function fadeon(){
if(opac<100){opac+=10;timer=setTimeout(fadeon,10);}
d[1].style.opacity=opac/100;
d[1].style.filter="alpha(opacity="+opac+")";
}
function start_auto(){
if(current<5){current++;dir=1;}else{current=0;dir=-1;}
timer2=setTimeout(start_auto,3000);
len=current*40+4;
clearTimeout(timer);
slide();
}
timer2=setTimeout(start_auto,3000);
}
}
addLoadEvent(main_focus);
</script>
<title>javascript仿flash焦点图片效果</title>
</head>

<body>
<div class="content_banner" id="focus_banner">
      <div class="small_list"><a title="banner1"><img src="images/small1.jpg" /></a><a title="banner2"><img src="images/small2.jpg" /></a><a title="banner3"><img src="images/small3.jpg" /></a><a title="banner4"><img src="images/small4.jpg" /></a><a title="banner5"><img src="images/small5.jpg" /></a><a title="banner6"><img src="images/small6.jpg" /></a></div>
      <div class="focus_banner"><div class="loading">Loading...<br /><img src="http://www.wxwdesign.cn/attachments/month_0809/v2008925193118.gif" width="100" height="100" /></div></div>
      <ul>
         <li><img src="images/1.jpg" width="443" height="209" alt="展示图片1" /></li>
         <li><img src="images/2.jpg" width="443" height="209" alt="展示图片2" /></li>
         <li><img src="images/3.jpg" width="443" height="209" alt="展示图片3" /></li>
         <li><img src="images/4.jpg" width="443" height="209" alt="展示图片4" /></li>
         <li><img src="images/5.jpg" width="443" height="209" alt="展示图片5" /></li>
         <li><img src="images/6.jpg" width="443" height="209" alt="展示图片6" /></li>
      </ul>
      <div class="focus_border"></div>
   </div>
</body>
</html>