<html>
<head>
<script>
function $(id){return document.getElementById(id);}
//imglist Array 图片信息
//imgalt Array 图片描述信息
//imgjup Array点击图片跳转地址
//cid 显示图片容积ID
//Meauid 菜单ID
function cruttImg(imglist,imgalt,imgjup,Meauid,cid){
var ImgList=imglist;
var imgAlt=imgalt;
var imgJup=imgjup;
var meauBox=$(Meauid);
var spit=2800; //自动播放间隔时间
var dq=0; //当前显示图片(index)
$(cid).src=ImgList[dq]; //初始时显示第一张图片
$(cid).οnmοuseοver=function(){clearInterval(a)}; //鼠标经过时暂停自动播放
$(cid).οnmοuseοut=function(){auto();} //鼠标移开开始自动播放
$(cid).style.cursor="pointer";
/*创建菜单*/
for(j=0;j<ImgList.length;j++){
var newLi=document.createElement("li");
var newImg=document.createElement("img");
newImg.setAttribute('src',ImgList[j]); //初始菜单显示图片
newLi.appendChild(newImg);
meauBox.appendChild(newLi);
}
/*初始菜单*/
var meauLis=meauBox.getElementsByTagName("li");//获得菜单项
for(i=0;i<meauLis.length;i++){//循环所有菜单项
if(meauLis[i].id!="nothis"){//判断是不是菜单
meauLis[i].οnclick=function(){ //给菜单项添加单击事件
try{$($(cid)).filters[0].Apply(); //指定滤镜
$(cid).filters[0].Play();}catch(err){} //开始滤镜
$(cid).src=this.childNodes[0].src; //指定点击时显示的焦点图
this.className="ov";
for(x=0;x<meauLis.length;x++){if(meauLis[x]!= this){meauLis[x].className="ou"}}
dq=parseInt(this.id);
$(cid).οnclick=function(){//给焦点图添加点击事件
open(imgJup[(dq)],'','');}
}}}
/*初始自动播放*/
var Intail=function(){
try{$(cid).filters[0].Apply();//指定滤镜
$(cid).filters[0].Play();}catch(err){}//开始滤镜
if(dq>=ImgList.length){dq=0}
$(cid).src=ImgList[dq];
$(cid).οnclick=function(){
open(imgJup[(dq-1)],'','');}
for(b=0;b<ImgList.length;b++){if(b==dq){meauLis[(dq+1)].className='ov'}else{meauLis[(b+1)].className='ou'}}
$(cid).alt=imgAlt[dq];
dq=dq+1;
}
/*执行*/
var a=setInterval(Intail,spit);
var auto=function(){a=setInterval(Intail,spit); }
}
</script>
<style>
.imgbox{
width:628px;
height:276px;
overflow:hidden;
margin:14px 12px 10px 12px;
}
.imgbox img{
width:628px;
height:276px;
}
.imgMeau{
width:628px;
height:86px;
overflow:hidden;
margin:0px 12px 0px 12px;
}
.imgMeau ul{
padding:0px;
margin:0px;
width:628px;
height:86px;
overflow:hidden;
list-style:none;
}
.imgMeau ul li{
background:url(imgmebg.jpg);
float:left;
width:180px;
height:76px;
margin-left:4px;
padding:3px 2px 1px 2px;
}
.ov{
border:#06C solid 1px;
}
.ou{
border:none;
}
.imgMeau ul li img{
border:0px;
width:179px;
height:76px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="imgbox" id="imgBox" >
<img src="" border="0" style="FILTER: progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0" name="Bimg" id="Bimg"/>
</div>
<div class="imgMeau">
<ul id="imgMeau">
<li id="nothis" style="width:53px; float:left; border:0px; margin:0px;"> <img src="images/vi_-07.jpg" style="width:53px;"/></li>
</ul>
<script>
var imgList=new Array();
var imgAlt=new Array();
var imgJup=new Array();
imgList[0]='http://pic.usfang.com/mntp/20081101/2008110113161918.jpg';
imgAlt[0]='imgAlt'
imgJup[0]='url';
imgList[1]='http://pic.dc.yesky.com/imagelist/08/32/9811885_9612.jpg';
imgAlt[1]='imgAlt'
imgJup[1]='url';
imgList[2]='http://pic.dc.yesky.com/imagelist/08/33/9889954_1713.jpg';
imgAlt[3]='imgAlt'
imgJup[3]='url';
new cruttImg(imgList,imgAlt,imgJup,'imgMeau','Bimg');
</script>
</div>
</body>
</html>