<!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>
<TITLE>New?Document</TITLE>
<style?type="text/css">
#fours_m{z-index:-10;?width:430px;?height:382px;?background:#053783?url(http://www.kuanghong.com/han/images/fours_bj.gif)?repeat-x?0?bottom;}
#f_img_roll{float:left;width:350px;?height:300px;?position:relative}
#f_img_roll?img{position:absolute;?left:0;?top:0}
#f_img_s{float:right;?position:relative;?width:80px;?height:300px;}
#f_img_s?ul{margin:0;?padding:0;?margin-left:6px;?list-style:none;}
#f_img_s?li{width:60px;?height:45px;border:1px?solid?#0066cc;margin-top:3px;}
????#f_img_s?img{width:54px;?height:39px;?border:3px?solid?#000066;vertical-align:top;?}
#f_img_s?div{top:3px}
#f_mask{position:absolute;?top:3px;?right:12px;?width:75px;?height:47px;?background:url(http://www.kuanghong.com/han/images/mask.gif)?no-repeat;}
#f_title{font-size:16px;?font-weight:bold;?clear:both;?margin-top:10px;?text-align:center;?color:#fff;?height:70px;?width:80%}
??</style>
??<script?type="text/javascript">
?//圖片資源
?var?imgs_m=[],imgs_s=[],imgs_title=[];
imgs_m[0]="http://www.kuanghong.com/han/images/img_1.jpg";
imgs_m[1]="http://www.kuanghong.com/han/images/img_2.jpg";
imgs_m[2]="http://www.kuanghong.com/han/images/img_3.jpg";
imgs_m[3]="http://www.kuanghong.com/han/images/img_4.jpg";
imgs_m[4]="http://www.kuanghong.com/han/images/img_5.jpg";
imgs_m[5]="http://www.kuanghong.com/han/images/img_6.jpg";
imgs_s[0]="http://www.kuanghong.com/han/images/img_1_0.jpg";
imgs_s[1]="http://www.kuanghong.com/han/images/img_2_0.jpg";
imgs_s[2]="http://www.kuanghong.com/han/images/img_3_0.jpg";
imgs_s[3]="http://www.kuanghong.com/han/images/img_4_0.jpg";
imgs_s[4]="http://www.kuanghong.com/han/images/img_5_0.jpg";
imgs_s[5]="http://www.kuanghong.com/han/images/img_6_0.jpg";
imgs_title[0]="第一張";
imgs_title[1]="第二張";
imgs_title[2]="第三張";
imgs_title[3]="第四張";
imgs_title[4]="第五張";
imgs_title[5]="第六張";
//顯示小圖
function?imgs_s_dis(){
var?imgs=document.getElementById("imgs");
var?fr=document.createDocumentFragment();
for(var?i=0;i<imgs_s.length;i++){
var?li=document.createElement("li");
li.innerHTML="<img?src='"+imgs_s[i]+"'?alt=''?/>";
lis.push(li);
fr.appendChild(li);
}
imgs.appendChild(fr);
}
//圖片切換
function?img_scroll(num){
cur_img.src=imgs_m[num];
img_title.innerHTML=imgs_title[num];
}
//圖片切換效果
?var?ie=/MSIE/.test(navigator.userAgent);//瀏覽器
?var?img_title=null;//title
?var?f_img_roll=null;//大圖
?var?cur_img=null;//當前大圖
?var?mb_img=null;//目標圖
?var?f_mask=null;//MASK層
?var?lis=[];//所有LI
?var?cur_li=null;//當前MASK所在LI
?var?mb_li=null;//目標LI位置
?var?tt=null;//時間函數
?var?m=0;//默認top
?var?r=0;//當前lis下標
?
?//自動播放
?function?img_play(){
r++;
if(r>lis.length-1)r=0;
mb_li=lis[r].offsetTop;
tt=setInterval("f_mask_mov()",25);
cur_li=lis[r];
img_scroll(r);
?}
?//加載動作
?function?_focus(){
imgs_s_dis();//初始小圖顯示
cur_li=lis[0];//初始當前mask所在元素
f_img_roll=document.getElementById("f_img_roll");
cur_img=f_img_roll.getElementsByTagName("img")[0];//得到默認大圖引用
img_title=document.getElementById("f_title");
f_mask=document.getElementById("f_mask");//得到MASK引用
for(var?i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
this.style.border="1px?solid?#cc0000";
}
lis[i].onmouseout=function(){
this.style.border="1px?solid?#0066cc";
}
lis[i].num=i;
lis[i].onclick=function(){
if(cur_li!=this){
clearTimeout(ttt);//停止自動播放
r=this.num;
mb_li=this.offsetTop;
tt=setInterval("f_mask_mov()",25);
cur_li=this;
img_scroll(this.num);
}
}
}
ttt=setTimeout("img_play()",3000);//開始自動播放
?}
?
?//滑動效果
?function?f_mask_mov(){
if(m>mb_li){
m-=(m-mb_li)*0.2;
if((m-1)<mb_li){
clearTimeout(tt);
f_mask.style.top=mb_li+"px";
f_mask_top=mb_li;//更新M值
m=mb_li;
ttt=setTimeout("img_play()",3000);//開始自動播放
return;
}else{
f_mask.style.top=m+"px";
}
}else{
m+=(mb_li+5-m)*0.2;
if(m>mb_li){
clearTimeout(tt);
f_mask.style.top=mb_li+"px";
m=f_mask_top=f_mask.offsetTop;//更新M值
ttt=setTimeout("img_play()",3000);//開始自動播放
return;
}else{
f_mask.style.top=m+"px";
}
}
?}
?window.onload=_focus;
??</script>
</HEAD>
<BODY>
<div?id="fours_m">
??<div?id="f_img_roll"><img?src="http://www.kuanghong.com/han/images/img_1.jpg"?/></div>
??<div?id="f_img_s">
????<div?id="f_mask"></div>
????<ul?id="imgs"></ul>
??</div>
??<div?id="f_title">第一張</div>
</div>
</BODY>
</HTML>