JS实现FLASH幻灯片图片切换效果的方法

本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法。分享给大家供大家参考。具体实现方法如下:

<!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" lang="zh-cn">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta http-equiv="Content-Language" content="gb2312" />

<meta name="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:1px solid #EEE;

position:relative;

}

#flashBox img{

/*初始不要显示*/

display:none;

/*用边框来实现空位,因为margin和paading有时会引起些麻烦*/

border:3px solid #FFF;

}

#flashBox ul{

position:absolute;

right:7px;

bottom:9px;

font:9px tahoma;

}

#flashBox ul li{

display:block;

float:left;

width:12px;

height:12px;

line-height:12px;

margin-right:3px;

border:1px solid #999;

background:#F0F0F0;

text-align:center;

cursor:pointer;

}

#flashBox ul li.hover{

border-color:red;

background:#FFE1E1;

color:red;

}

/*  ]]>  */

</style>

<script type="text/javascript">

function flashBoxCtrl(o){

this.obj=document.getElementById(o);

//这个私有方法虽然写了,但暂时没用到

function addListener(ele,eventName,functionBody){

if (ele.attachEvent){

ele.attachEvent("on"+eventName, functionBody);

}else if (ele.addEventListener){

ele.addEventListener("on"+eventName,functionBody, false);

}else{

return false;

}

}

//初始化

this.init=function(){

var objImg=this.obj.getElementsByTagName("img");

var tagLength=objImg.length;

if (tagLength>0){

var oUl=document.createElement("ul");

oUl.setAttribute("id",o+"numTag");

for (var i=0;i<tagLength;i++){

var oLi=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";

//设置标签事件

var oTag=this.obj.getElementsByTagName("li");

for (var i=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>

<div id="flashBox">

<img src="/images/m02.jpg" />

<img src="/images/m03.jpg" />

<img src="/images/m04.jpg" />

<img src="/images/m09.jpg" />

</div>

<script type="text/javascript">

//生成一个对象

new flashBoxCtrl("flashBox");

</script>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。