JS实现FLASH幻灯片图片切换效果的方法
作者:代码家园 时间:2024-04-22 13:01:57
本文实例讲述了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程序设计有所帮助。
标签:JS,FLASH,幻灯片,方法
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
iscroll碰到Select无法选择下拉刷新的解决办法
2024-05-11 09:33:35
当设计师遭遇HTML5
2011-08-05 18:59:53
浅谈python锁与死锁问题
2022-06-02 16:38:37
浅谈解决360兼容模式浏览器的方法
2023-09-17 01:11:39
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2021-09-03 00:27:15
python如何导入自己的模块
2022-05-21 08:14:57
![](https://img.aspxhome.com/file/2023/2/111992_0s.png)
vue自定义filters过滤器
2024-04-30 08:45:12
![](https://img.aspxhome.com/file/2023/2/132992_0s.png)
vue自定义keepalive组件的问题解析
2024-05-09 15:12:38
![](https://img.aspxhome.com/file/2023/3/126553_0s.jpg)
python 的列表遍历删除实现代码
2023-07-15 11:44:35
![](https://img.aspxhome.com/file/2023/3/93603_0s.png)
对numpy中数组元素的统一赋值实例
2021-05-31 18:47:37
Yahoo!上的小秘密
2007-08-23 09:48:00
![](https://img.aspxhome.com/file/UploadPic/20078/23/200782395619331s.jpg)
SQL SERVER使用REPLACE将某一列字段中的某个值替换为其他的值
2024-01-23 15:14:57
Python时间的精准正则匹配方法分析
2022-12-10 12:59:28
mysql存储过程 在动态SQL内获取返回值的方法详解
2024-01-19 01:22:53
关于go-zero服务自动收集问题分析
2024-04-26 17:29:51
![](https://img.aspxhome.com/file/2023/8/134028_0s.jpg)
Python 使用 docopt 解析json参数文件过程讲解
2021-06-30 21:44:00
![](https://img.aspxhome.com/file/2023/9/93609_0s.png)
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2024-04-30 10:47:22
python环境下安装opencv库的方法
2022-03-22 10:11:24
![](https://img.aspxhome.com/file/2023/0/84930_0s.png)
Python中集合类型(set)学习小结
2023-03-18 13:56:27
微信小程序(六):列表上拉加载下拉刷新示例
2024-05-11 09:34:22