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;
% I( W6 b+ c9 Q: W- x) i- F 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);}% l  F3 x# f$ g" X: z& y
}6 L6 `* ~: s0 J' h$ c; o
function slide(){6 b3 T" O% J- a
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();}; m2 X2 o+ y( H5 l9 [1 y1 M$ ]
d[2].style.top=String(y)+"px";
1 j$ t7 j& z/ j! E* x3 J }& |, b! R. Q/ l' ]" z( n
function fadeout(){1 P" @% {7 @1 y5 G
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();}
4 {2 \* W% l8 u1 v& J d[1].style.opacity=opac/100;& x5 P7 C9 U8 _% R1 G( Z0 b
d[1].style.filter="alpha(opacity="+opac+")"; + r" e& A1 l, r+ U. V! W
}
% w9 q. w/ j8 \3 e4 v( A, A function fadeon(){
; G' k% L# D& t% O if(opac<100){opac+=10;timer=setTimeout(fadeon,10);}7 Y9 M6 R4 H$ `  _; b; }
d[1].style.opacity=opac/100;  T0 w/ c; i0 N$ S2 }2 ^* j
d[1].style.filter="alpha(opacity="+opac+")";
' ~. p4 R  c$ m" [/ K* ~ }" |3 c' x& q! p: i6 Q3 U% G
function start_auto(){) ^' _+ g; ?. i$ m6 ?6 _% c' @5 u
if(current<5){current++;dir=1;}else{current=0;dir=-1;}
. D* U% V1 V# C% T timer2=setTimeout(start_auto,3000);
. F  j0 h/ S1 ~1 S6 k+ d len=current*40+4;1 I6 F; s) \1 h- _/ _
clearTimeout(timer);, ^5 }' Y) V1 }% d9 ^: ~/ T) l# ]; m( a
slide();
* ~& `  s2 O" j. l0 F" R9 p }+ [8 R! r4 T" ]3 g" ]3 y/ _" w: V
timer2=setTimeout(start_auto,3000);
, c2 ?, r5 x) _4 `$ P9 x2 w }
7 f9 q/ U& p. L$ K- R0 T }
3 Z. ~6 [7 c9 v' W3 qaddLoadEvent(main_focus);( H( F% }/ Y- B9 `5 C2 Y' F8 m
</script>8 f' h, P* x; M4 a
<title>javascript仿flash焦點圖片效果</title>
/ _5 z+ b+ y9 x( P</head>
2 [0 @1 X/ D: s+ Y+ y$ C% _# A/ f8 x/ O8 }
<body>
3 @& |& O( P2 z2 _<div class="content_banner" id="focus_banner">
* ^; |/ }  h4 P& B       <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>5 w: m7 i. z- Y( Q
      <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>) h* h1 L4 A2 @: |
      <ul>2 J/ l+ S# |- b5 k! e& A) s' W
         <li><img src="images/1.jpg" width="443" height="209" alt="展示圖片1" /></li>
6 ^  I# }9 o1 W- ?: J          <li><img src="images/2.jpg" width="443" height="209" alt="展示圖片2" /></li>
! z, c5 A. ~. B/ [" {          <li><img src="images/3.jpg" width="443" height="209" alt="展示圖片3" /></li>: K: y! r0 a" O4 e; G
         <li><img src="images/4.jpg" width="443" height="209" alt="展示圖片4" /></li>
  f/ J3 H8 K& y. b          <li><img src="images/5.jpg" width="443" height="209" alt="展示圖片5" /></li>+ o: C. i2 m! c/ q% Z; m) v7 A
         <li><img src="images/6.jpg" width="443" height="209" alt="展示圖片6" /></li>
( Q/ F0 T6 R% X, x       </ul>
- T# s7 t; F! ?9 g# d2 B8 o  |       <div class="focus_border"></div>
/ x/ ]# `& i. w5 O- m& _3 S    </div>
+ T7 _; p1 s, d4 |</body>% b9 q* ?* v! M9 o  C
</html>

		自動登錄	找回密碼
密碼			免费注册

javascript仿flash焦點圖片效果

相關帖子