JS实现FLASH幻灯片图片切换效果的方法
本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法。分享给大家供大家参考。具体实现方法如下:
JS模拟FLASH幻灯片图片切换效果/*
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;
}
/* ]]> */
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
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[i].οnmοuseοver=function(){
for (j=0;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();
}
//生成一个对象
new flashBoxCtrl("flashBox");
希望本文所述对大家的javascript程序设计有所帮助。相关阅读:
java万年历,获取该年月日历表
JavaScript 消息框效果【实现代码】
Win7开始菜单中锁定到此列表功能不能用的解决办法
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Win10系统更新驱动程序超时问题解决方法
用原生JS获取CLASS对象(很简单实用)
Linux折腾记(十二):桌面美化那点事儿
jQuery实现给页面换肤的方法
检查并修复mysql数据库表的具体方法
进入Linux单用户模式的方法
Win7系统每次进入LOL观战就出现黑屏未响应的解决方法
正则表达式提取img的src
Android编程中TextView宽度过大导致Drawable无法居中问题解决方法
win7系统360浏览器为什么找不到我的导航?win7系统360浏览器找不到我的导航的原因