EEfaq论坛-赚客自留地

 找回密码
 免费注册
查看: 1305|回复: 0

javascript仿flash焦点图片效果

[复制链接]
发表于 2009-4-26 21:25:38 | 显示全部楼层 |阅读模式
以前在网上见到过一个类似的效果,是用flash+xml实现的,自己写了一个JavaScript版本的,效果截图如下:


                               
登录/注册后可看大图

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>
您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|联系我们|Archiver|手机版|小黑屋|EEfaq论坛

GMT+8, 2024-11-1 07:15

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表