java焦点图_简单焦点图实现

new document

*{

padding:0px;

margin:0px;

cursor:pointer;

}

#d1{

width:430px;

height:240px;

}

#d1 img{

width:384px;float:left;

}

#d1 p{

width:30px;float:left;

margin-left:5px;

margin-top:5px;

}

#d1 p a{

target:_blank;

}

#d1 p input{

width:20px;

border:1px solid grey;

margin-bottom:7px;

}

vart1;var attr=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg"];//图片名称,数组存储,用数组下标访问,图片名称有没有规律都可以实现

varimg;var n=1;//图片初始为第一个

window.οnlοad=function(){

t1=setInterval("bianhua()",1000);//定时器,用于自动变换图片

img=document.getElementById("img1");

img.οnmοuseοver=jinru;

img.οnmοuseοut=likai;var btns=document.getElementsByTagName("input");for(var i=0;i

btn.οnmοuseοver=jinru;

btn.οnmοuseοut=likai;

}

}//鼠标进入图片的方法

functionjinru(){if(this.type=="button"){

n=this.value-1;this.style.backgroundColor="#ffccff";

img.src="images/"+attr[n];

}

window.clearInterval(t1);

}//鼠标离开图片的方法

functionlikai(){if(this.type=="button"){

n=this.value;this.style.backgroundColor="";

}

t1=setInterval("bianhua()",1000);

}//设定要显示的图片,当n超过图片的数量后,将其归零,从第一张图片重新开始

functionbianhua(){if(n>=attr.length){

n=0;

}

img.src="images/"+attr[n];

n++;

}