JS实现FLASH幻灯片图片切换效果的方法
本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-cn">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<metahttp-equiv="Content-Language"content="gb2312"/>
<metaname="author"content="RainoXu"/>
<title>JS模拟FLASH幻灯片图片切换效果</title>
</head>
<body>
<style type="text/css">
/* <![CDATA[ */
ul,li{
padding:0;
margin:0;
list-style:none;
}
#flashBox{
width:326px;
height:246px;
border:1pxsolid#EEE;
position:relative;
}
#flashBoximg{
/*初始不要显示*/
display:none;
/*用边框来实现空位，因为margin和paading有时会引起些麻烦*/
border:3pxsolid#FFF;
}
#flashBoxul{
position:absolute;
right:7px;
bottom:9px;
font:9pxtahoma;
}
#flashBoxulli{
display:block;
float:left;
width:12px;
height:12px;
line-height:12px;
margin-right:3px;
border:1pxsolid#999;
background:#F0F0F0;
text-align:center;
cursor:pointer;
}
#flashBoxulli.hover{
border-color:red;
background:#FFE1E1;
color:red;
}
/* ]]> */
</style>
<scripttype="text/javascript">
functionflashBoxCtrl(o){
this.obj=document.getElementById(o);
//这个私有方法虽然写了，但暂时没用到
functionaddListener(ele,eventName,functionBody){
if(ele.attachEvent){
ele.attachEvent("on"+eventName,functionBody);
}elseif(ele.addEventListener){
ele.addEventListener("on"+eventName,functionBody,false);
}else{
returnfalse;
}
}
//初始化
this.init=function(){
varobjImg=this.obj.getElementsByTagName("img");
vartagLength=objImg.length;
if(tagLength>0){
varoUl=document.createElement("ul");
oUl.setAttribute("id",o+"numTag");
for(vari=0;i<tagLength;i++){
varoLi=oUl.appendChild(document.createElement("li"));
if(i==0){
oLi.setAttribute("class","hover");//初始化时把第一个设置为高亮
oLi.setAttribute("className","hover");
}
//设置标签的数字
oLi.appendChild(document.createTextNode((i+1)));
}
this.obj.appendChild(oUl);
objImg[0].style.display="block";
//设置标签事件
varoTag=this.obj.getElementsByTagName("li");
for(vari=0;i<oTag.length;i++){
oTag[i].onmouseover=function(){
for(j=0;j<oTag.length;j++){
oTag[j].className="";
objImg[j].style.display="none";
}
this.className="hover";
objImg[this.innerHTML-1].style.display="block";
}
}
}
};
//自动滚动的方法还没写
this.imgRoll=function(){};
//生成对象时自动加载init()方法以初始化对象
this.init();
}
</script>
<divid="flashBox">
<imgsrc="/images/m02.jpg"/>
<imgsrc="/images/m03.jpg"/>
<imgsrc="/images/m04.jpg"/>
<imgsrc="/images/m09.jpg"/>
</div>
<scripttype="text/javascript">
//生成一个对象
newflashBoxCtrl("flashBox");
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。