JS实现模拟FLASH幻灯片图片切换网页特效_焦点_首都热线北京最大的综合门户网站之一

JS实现模拟FLASH幻灯片图片切换网页特效

网上收集 2009/8/1 15:37:04

(182)

只要完成#flashBox的XHTML的代码设计，以及和其相关的CSS设计，然后直接调用new flashBoxCtrl（"flashBox"），便可实现效果。构造函数里只要调入需要生成幻灯效果的ID，便能轻松实现。同时，数字标签由对象计算后自动生成，无需手工操作，所有的工作都隐藏在对象内部，对外只需要调用构函数去不断地构建对
　　<!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>flash幻灯</title>
　　</head>
　　<body>
　　<style type ="text/css">
　　/* <![CDATA[ */
　　ul,li{
　　padding:0;
　　margin:0;
　　list-style:none;
　　}
　　#flashBox{
　　width:346px;
　　height:186px;
　　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="
　　<img src="
　　<img src="
　　<img src="
　　</div>
　　<script type="text/javascript">
　　//生成一个对象
　　new flashBoxCtrl("flashBox");
　　</script>
　　</body>
　　</html>

阅读(182) （责任编辑：城市网）

北京美图