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;5 t* |! F) q% }  {% @
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);}$ x' b$ t5 \3 s
}
; g8 J& C3 T: d( G- U function slide(){, o/ p5 G4 {5 O) a3 [4 [
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();}
& L$ v# y/ P  P' F( _0 D3 t d[2].style.top=String(y)+"px";2 e6 T; _! }! h4 \
}$ A7 |, u" ~4 I: Y; g
function fadeout(){
6 l% s: `9 [4 f 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();}; M. K- R' y3 P2 ~2 L5 w
d[1].style.opacity=opac/100;
- Y2 Q: J$ c' y! M1 A+ g d[1].style.filter="alpha(opacity="+opac+")";
6 p3 {9 H* f! L: b1 M  m$ F. g }' F3 E" i4 `) R" A$ Y: Z/ r  ^2 _
function fadeon(){8 `( P1 I+ q& W
if(opac<100){opac+=10;timer=setTimeout(fadeon,10);}
1 H" O1 p3 r: U% r/ e d[1].style.opacity=opac/100;
5 D7 {% C! b0 f1 G2 |* l0 w d[1].style.filter="alpha(opacity="+opac+")";
) H- O6 U( g2 u$ `& u }
, [4 L: D4 n3 [0 j( b2 O  { function start_auto(){" Q: m' J9 c7 _& m- B& x$ U* _5 ~
if(current<5){current++;dir=1;}else{current=0;dir=-1;}* B" h! \* A1 u) H5 ]' n
timer2=setTimeout(start_auto,3000);
( V3 T% D# i9 [7 O- ?: C5 z  V/ } len=current*40+4;
9 J  f( p& i  g: s6 P& f* P5 h clearTimeout(timer);1 y+ G: Z" D, s. b- H7 j% c
slide();# E' _6 S/ U; r) q& I
}
# j2 f& v% f2 C5 U; a, v3 k timer2=setTimeout(start_auto,3000);0 S! U' ?  }( p4 u" E
}
  f; k: D$ J, M0 s8 Z4 H }3 Y8 X* h  i0 [  e( R5 I
addLoadEvent(main_focus);9 [( ]  y7 b6 ]2 K" T7 X3 ~
</script>
/ ]- s& L5 ]/ u6 G<title>javascript仿flash焦點圖片效果</title>
# k2 T) [6 R  O% ^# j</head>1 m3 n/ C4 o3 H3 y2 u7 T

; K6 ]! \6 d1 i' T) \& P" _<body>
& s4 B3 D* J% I  C' ~% A<div class="content_banner" id="focus_banner">+ B8 ^$ ~) `; J' e6 k% |
      <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>
  D5 f7 F: y' k7 m$ n8 `) o9 P5 o/ v       <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>
/ ~/ D6 ?6 S- g0 [       <ul>; r% k# X. N& `
         <li><img src="images/1.jpg" width="443" height="209" alt="展示圖片1" /></li>8 N4 E" `1 V9 k+ D) V9 W; b9 a3 J3 R
         <li><img src="images/2.jpg" width="443" height="209" alt="展示圖片2" /></li>3 r8 J/ y' T6 f/ [' _
         <li><img src="images/3.jpg" width="443" height="209" alt="展示圖片3" /></li>
  w( t9 A2 s) J5 p  O          <li><img src="images/4.jpg" width="443" height="209" alt="展示圖片4" /></li>
# i: x. m; a* l8 ?* C$ l          <li><img src="images/5.jpg" width="443" height="209" alt="展示圖片5" /></li>
) H5 C& \  c) ]7 L          <li><img src="images/6.jpg" width="443" height="209" alt="展示圖片6" /></li>9 e8 h# `' t# n& u/ j
      </ul>
! E( D. X- C1 v: i) N4 s! B       <div class="focus_border"></div>
7 R4 ]6 Q1 t+ Q3 X! R- Y0 ]    </div>9 j4 W: o* q$ R, O- v; i# T- M
</body>; d4 J6 j4 t7 ^) H3 a' _
</html>

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

javascript仿flash焦點圖片效果

相關帖子