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;
. m, S$ E  o% }/ a8 }* S% v' ^ 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);}% y1 x7 ]& _4 r" {% t
}  l* I+ g% I* R8 w
function slide(){+ w/ T- W0 s) S) F
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();}! F# h9 T/ h- B$ e9 }( Y7 j
d[2].style.top=String(y)+"px";; E, H5 X: k" f. {- N( ^
}
- ]6 P3 a2 V1 D function fadeout(){$ j6 X% V' i. J" [& {. x  z" 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();}. D9 U8 M7 Z, M/ ~, ?3 m" m
d[1].style.opacity=opac/100;
0 N( S" z! {0 J' W- d9 d d[1].style.filter="alpha(opacity="+opac+")"; 1 u& }1 I% z! |' v* ?7 r, @0 o4 `
}+ C$ y" C, Z9 K$ a# i& k7 r5 N
function fadeon(){
; X& N. c, x# C5 V- i if(opac<100){opac+=10;timer=setTimeout(fadeon,10);}
: k: [! c* f& \& M! n: E+ u d[1].style.opacity=opac/100;
  s' c' A  |7 o+ v% P' k d[1].style.filter="alpha(opacity="+opac+")";
. x) G: G4 x6 s) d }
' e! s# H0 |) x7 X function start_auto(){% C5 `5 m6 _8 G! G' b1 F
if(current<5){current++;dir=1;}else{current=0;dir=-1;}
/ C, O4 h, d: Q/ H* E2 K timer2=setTimeout(start_auto,3000);2 S" h! j4 p' A
len=current*40+4;
* A8 L6 b# a4 F3 Q# e clearTimeout(timer);
7 Q7 P, l/ d) {2 l slide();0 v4 I! z6 N( Z  e! T- d  H& S, n! ]
}
5 Z0 L; ~7 r* ?8 p/ h" V timer2=setTimeout(start_auto,3000);% M! a7 k; |+ R- P) Y. a  M
}
0 {5 H3 c6 y0 P  ~! ^) ^ }# g" a" j1 V  v6 W0 f2 v
addLoadEvent(main_focus);. \+ d! j! T/ G0 w. K
</script>
* F1 l: Y* ^( {" \0 |$ B+ i& d<title>javascript仿flash焦點圖片效果</title>
5 u1 w: P9 o; B& B% @1 q</head>
2 G( h2 E2 M9 d( a
2 G6 M! a1 P5 i; }% z<body>
: S: ?0 a/ f/ x2 m<div class="content_banner" id="focus_banner">
2 i$ X$ c# I& O       <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>+ g! V; J' P  _/ v( d
      <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>7 K5 J6 o! ]3 l0 H' t! j
      <ul>7 B4 A' b7 h7 h4 n2 F7 E% r
         <li><img src="images/1.jpg" width="443" height="209" alt="展示圖片1" /></li>
; \7 }% D# V- U" i* M/ N' w7 H9 l          <li><img src="images/2.jpg" width="443" height="209" alt="展示圖片2" /></li>
6 g6 C7 t% K5 Z- }4 W- ^          <li><img src="images/3.jpg" width="443" height="209" alt="展示圖片3" /></li>/ N! c, A2 y) X5 b- h/ g
         <li><img src="images/4.jpg" width="443" height="209" alt="展示圖片4" /></li>
) z+ k" g& _- [# J! e" r' j' f& d          <li><img src="images/5.jpg" width="443" height="209" alt="展示圖片5" /></li>, l8 I/ Q9 Q! H% q9 v, ?
         <li><img src="images/6.jpg" width="443" height="209" alt="展示圖片6" /></li># Y) C/ p+ @. H: [& b. k2 T: N
      </ul>! y) g! C- ~% E$ j" k7 ^
      <div class="focus_border"></div>
6 V) C: Z3 t. t/ D, f+ u    </div>
% K2 u- J2 U3 }  M9 R1 y% m1 X* P</body>
$ B0 W& u0 ~0 C4 Z; i8 u</html>

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

javascript仿flash焦點圖片效果

相關帖子

瀏覽過的版塊