以前在網上見到過一個類似的效果，是用flash+xml實現的，自己寫了一個JavaScript版本的，效果截圖如下：
, y9 e+ {- [( u( @, \/ B2 |5 ~7 [( H* U8 E' i$ l
 % C9 Q3 s. b% }# R1 H- c7 j+ ?
HTML代碼
$ n$ |6 ~- L O, y; L) t0 I/ J& w
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">% M6 M. `& l) E! h3 z
<html xmlns="http://www.w3.org/1999/xhtml">7 g" I0 V( J C6 Y& S; M
<head>5 f' F$ r! k/ O' H" ~
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> h% Z7 c" H% a3 H& Z# ]$ F# _) w
<base href="http://www.wxwdesign.cn/Down/flash/flash_show/" />
" l/ d5 Z* s/ F4 n<style type="text/css"># z2 k5 x/ [ z+ N3 {: q1 Z8 T
.content_banner{ width:541px;margin-right:10px;float:left; height:244px; overflow:hidden; background-color:#000000; position:relative;}
' c9 L* W; j4 V& |9 ]: {9 S: f.content_banner .small_list{padding:4px; float:left; height:236px; width:82px; overflow:hidden;}0 M! Q& C0 { `8 ?
.content_banner .small_list a{ display:block; width:82px; height:36px; margin-bottom:4px; cursor:pointer; overflow:hidden;}
* A% M, Q. D: S1 j n8 E# F.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;}2 ?/ A6 S1 ^' @2 X* A2 t
.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;}5 O8 S6 o# i1 L- X
.content_banner ul{display:none;}$ b! j- @/ S; I2 V6 D5 \
.content_banner .focus_border{ background:url(images/index_focus_arrowborder.gif); width:88px; height:36px; position:absolute; left:4px; top:4px; clear:both;}& E* J/ h+ U, v2 @
</style>( D+ T* R8 I' H5 b) h7 Z
<script language="javascript" type="text/javascript">
+ r# ], e* R* V% j+ ~( _function getid(id){return document.getElementById(id);}
" Y+ M2 V. J4 `9 I6 O9 ~$ i: @function gettag(tag,obj){if(obj){return obj.getElementsByTagName(tag)}else{return document.getElementsByTagName(tag)}}
0 F$ j/ l0 [1 ]* Ffunction addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload!="function"){window.onload=func;}else{window.onload=function(){oldonload();func();}};}
0 I; U- W* p/ d" ?function main_focus(){" p2 a% b5 T8 K; V; t9 O3 L
if(getid("focus_banner")){
$ k8 f" d5 A$ I k0 h var a=gettag("a",getid("focus_banner"));2 B( K$ L) S) p9 D8 o {* }
var d=gettag("div",getid("focus_banner"));
. [$ c4 m6 h, Y: h; T( H var li=gettag("li",getid("focus_banner"));5 c0 W5 }6 F) R4 D! |
d[1].innerHTML=li[0].innerHTML+gettag("img",li[0])[0].alt;
3 ?0 u, M/ w4 T& L/ s- I var current=0,len,y=4,dir,opac=100,timer,timer2;
5 M- q+ K- b" L5 z. o- N, Z$ O! d Z for(var i=0;i<a.length;i++){
. p& W/ _4 n$ R ]7 g' C* Y a.index=i;
9 P) l( t! W- `' I7 G- _# r5 } 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);}
8 r$ O/ B! V P. w; m% D7 W }7 I: B: z) M/ O7 p: k! r- e
function slide(){
/ C% U0 \$ M* D5 H8 ], l1 Z- c 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();}0 S3 s& o# S- Z5 o- R$ N! r. Y
d[2].style.top=String(y)+"px";* k8 k1 I3 ] u+ b
}+ k' n/ |' |1 r, F& L$ F% R
function fadeout(){
' z! r/ ~0 O$ d ^( b 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();}
$ f: S; l7 \/ q& |- ~7 v/ k d[1].style.opacity=opac/100;
7 I, F: W x! Z' x. s8 L. Q d[1].style.filter="alpha(opacity="+opac+")";
# T/ g i0 v4 {: ?; m }& `* r8 o0 g& q, \
function fadeon(){ o4 O, r( y( k5 Q. Y" Q
if(opac<100){opac+=10;timer=setTimeout(fadeon,10);}. H# D8 `: N/ I0 q% o* D9 \
d[1].style.opacity=opac/100;5 ~. v$ Z: S2 R7 o* V' S3 P
d[1].style.filter="alpha(opacity="+opac+")";, h" ~& N5 ` ]- n" B
}
u3 r) @" o, o7 G7 d, g function start_auto(){
8 Y5 ?3 i: i/ ~9 S+ \" k if(current<5){current++;dir=1;}else{current=0;dir=-1;}' J# A6 L3 c& K' P% ^' ^
timer2=setTimeout(start_auto,3000);6 C% ?( S% X) F9 I
len=current*40+4;& S7 H4 T, {2 e* Q: c2 g$ M
clearTimeout(timer);
5 A" g) V6 J, X+ v7 r9 S slide();
! [" s2 g- Q1 \1 q4 I4 B }
7 w8 I/ l/ d8 j5 { timer2=setTimeout(start_auto,3000);
' [6 N7 ]4 q0 A9 j9 R3 ~ }, W% H" B7 O0 s5 N
}
$ |! ]: g! Q4 h4 N5 waddLoadEvent(main_focus);
: r, @, ]/ @& K* E. k# V/ E</script>
( j; }+ M$ o9 }6 ^( [3 S! i. ]' F' k<title>javascript仿flash焦點圖片效果</title>
9 h d! t8 E$ p' Z- t. L</head>
7 d$ j8 w% g# k) i+ G# z; x; j$ B+ }3 M& o& Z Y
<body>
3 H" x! ^; t% M<div class="content_banner" id="focus_banner">$ n- l& w) m+ V' M
<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>
. d, L/ y/ v( O( I' l <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>
" X0 S/ M: J/ Y3 @* N, n <ul>
; D- P, a# ]6 @& Q6 m7 S5 D <li><img src="images/1.jpg" width="443" height="209" alt="展示圖片1" /></li>
1 U, W0 T1 Y y7 ]3 ~. s <li><img src="images/2.jpg" width="443" height="209" alt="展示圖片2" /></li>% R: L- `& u/ x; O; V6 C. p
<li><img src="images/3.jpg" width="443" height="209" alt="展示圖片3" /></li>5 O2 W" T8 j2 I- {* z
<li><img src="images/4.jpg" width="443" height="209" alt="展示圖片4" /></li>; g$ _! T9 ]* m, s7 P
<li><img src="images/5.jpg" width="443" height="209" alt="展示圖片5" /></li>
: J: w- i6 [0 X1 A$ R! X <li><img src="images/6.jpg" width="443" height="209" alt="展示圖片6" /></li>
5 M9 H6 G' `) A9 m1 _/ ^+ I0 R) {0 V' S </ul>
2 b! Z# i3 H4 v; {7 k <div class="focus_border"></div>
- E. F/ f; H ~' j% I </div>
2 r* M/ U4 k$ {9 o# k</body>
# k1 [3 F: H0 `8 }! b</html> |
|
發表於 2009-4-26 21:25:38
提升卡
沉默卡
变色卡