<!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" />
<title></title>
<style>
@charset "utf-8";
body{ font:12px "宋体"; background:#fff; margin:0 ; padding:0 ;}
option{margin:0; padding:0;}
input{ margin:0px; padding:0px; }
dt,dl,dd,p,ul,li,form,img,p,strong{margin:0px; padding:0px; border:0;}
a{ color: #000; text-decoration: none; }
a:hover{ color:#B70505; text-decoration:underline;}
a:focus { outline:none;}
ul,li{list-style:none;}
.clear{clear:both;font-size:0px;height:0px;line-height:0px;overflow:hidden;}
#focus_img{ padding-left:25px; width:274px; float:left; padding-right:5px; border-right:1px solid #BFBFBF; margin-top:15px;}
.undis {DISPLAY: none}
#simg{ width:264px;}
#simg ul{}
#simg ul li{ width:68px; height:68px;border:1px solid #BDBCBD; margin-right:6px; margin-bottom:10px; margin-left:6px; CURSOR: pointer; padding:3px; background:#fff; float:left; display:inline;}
</style>
</head>
<body>          
<DIV id=focus_img>
  <DIV id=au style="WIDTH: 258px; height:259px; padding:3px; border:1px solid #BDBBBC; border-bottom:5px solid #0491B7;">
    <DIV class=dis name="f">
       <A href="#" target=_blank>
         <img src="http://www.wellbase.com.hk/img.php?width=259&height=258&bg=fff&file=upload/product/42/photo/4e25287c2ef48.jpg"  />
       </A>
    </DIV>
    <DIV class=undis name="f">
      <A href="#" target=_blank>
        <img src="http://www.wellbase.com.hk/img.php?width=259&height=258&bg=fff&file=upload/product/50/photo/4e043e867a3c0.jpg" />
      </A>
    </DIV>
    <DIV class=undis name="f">
      <A href="#" target=_blank>
        <img src="http://www.wellbase.com.hk/img.php?width=259&height=258&bg=fff&file=upload/product/42/photo/4e61b8d64021c.jpg"/>
      </A>
    </DIV>
  </DIV>
  <div id="simg">
     <ul>
       <li class="s" onmouseover="play(this,'au','');"> 
         <A href="#">
           <img src="http://www.wellbase.com.hk/img.php?width=68&height=68&bg=fff&file=upload/product/42/photo/4e25287c2ef48.jpg" />
         </A>
       </li>
       <li class="s" onmouseover="play(this,'au','');">
         <A href="#">
            <img src="http://www.wellbase.com.hk/img.php?width=68&height=68&bg=fff&file=upload/product/50/photo/4e043e867a3c0.jpg"/>
         </A>
       </li>
       <li class="s" onmouseover="play(this,'au','');">
         <A href="#">
            <img src="http://www.wellbase.com.hk/img.php?width=68&height=68&bg=fff&file=upload/product/42/photo/4e61b8d64021c.jpg"/>
         </A>
       </li>
     </ul>
   </div>
</DIV>
    <SCRIPT language=JavaScript src="js/img.js" type=text/javascript >
    function getid(obj)//取对应id的元素
  {
return document.getElementById(obj);
  } function getNames(obj,name,tij)//取obj元素下标签为tij的元素并要求满足name属性=name;返回一个数组
{
var p = getid(obj);
var plist = p.getElementsByTagName(tij);
var rlist = new Array();
for(i=0;i<plist.length;i++)
{
if(plist[i].getAttribute("name") == name)
{
rlist[rlist.length] = plist[i];
}
}
return rlist;
} function ri(obj)//取得对应的小图列表中当前元素对应的序号
{
var p = getid("simg").getElementsByTagName("li");
for(i=0;i<p.length;i++)
{
if(obj == p[i])
{
return i;
}
}
} function ci(obj)//小图选择框的处理函数
{
var p = getid("simg").getElementsByTagName("li");
for(i=0;i<p.length;i++)
{
if(obj ==p[i])
{
p[i].className ="s";
}
else
{
p[i].className ="";
}
}
}
function fiterplay(obj,num,t,name)//类似页卡的函数.设置对应内容的隐藏和显示 obj:元素的id  name:元素对应的name属性的值, t:对应内容的标签 num:当前选择的元素的序号
{
var fitlist = getNames(obj,name,t);
for(i=0;i<fitlist.length;i++)
{ if(i == num)
{
fitlist[i].className = "dis";
}
else
{
fitlist[i].className = "undis";
}
}
}
  
  
function play(obj,n1)//播放的函数
{
var p = obj.parentNode.parentNode.getElementsByTagName("img");
var au = getid(n1);
var num = ri(obj);
try //ie下的处理部分
{
with(au)
{
filters[0].Apply(); //接收滤镜
ci(obj); //变幻小图的选择.可以放在try以外.
fiterplay(n1,num,"div","f");//设置滤镜中对应部分的显示和隐藏
filters[0].play(); //播放滤镜
}
}
catch(e)//ff下的处理部分
{
ci(obj);
fiterplay(n1,num,"div","f");
}
}
var n=0;
function clearAuto() {clearInterval(autoStart);};
function setAuto(){autoStart=setInterval("auto(n)", 4000)}
function auto()
{
var x = getid("simg").getElementsByTagName("li");
n++;
if(n>3)n=0;
play(x[n],"au");
}
 
    </SCRIPT>  </body>
</html>