幻灯程序更新v2.0

goby2008

浏览: 603773 次

最近访客更多访客>>

jAmEs_

k-ping

fygday

bill1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript CSS IE XHTML J#

<!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">
//<![CDATA[
function flashBoxCtrl(o,t){
      /*
      =======参数释意=========
      @ o:需要控制的xhtml元素的ID
      @ t:图片切换的时间间隔      
      =====================
      */

      //self用于在不明确this指向时使用，因为self指向对象本身
      var self=this;      

      this.obj=document.getElementById(o);
      this.controller=null;
      this.speed=t;
      
      //这个私有方法虽然写了，但暂时没用到
      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");      //for FF
                              oLi.setAttribute("className","hover");//for IE
                        }
                        
                        //设置标签的数字
                        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";

                                    //鼠标移上时清除滚动
                                    clearInterval(self.controller);
                              }
                              this.className="hover";
                              objImg[this.innerHTML-1].style.display="block";
                        }
                        oTag[i].onmouseout=function(){
                              
                              //鼠标移开则继续滚动
                              self.controller=setInterval(function(){self.imgRoll()},self.speed);
                        }
                  }
            }
            self.controller=setInterval(function(){self.imgRoll()},self.speed);
      };      
      
      //自动滚动的方法
      this.imgRoll=function(){
            var objHover;
            var objImg=this.obj.getElementsByTagName("img");
            var objLi=this.obj.getElementsByTagName("li");
            var i;
            for (i=0;i<objImg.length;i++){
                  if (objImg[i].style.display=="block"){
                        break;
                  }
            }
            objImg[i].style.display="none";
            objLi[i].className="";            

            if (i+1>=objImg.length){
                  i=0;
            }else{
                  i++;
            }
            
            objImg[i].style.display="block";
            objLi[i].className="hover";
      };

      //生成对象时自动加载init()方法以初始化对象
      this.init();      
}

//]]>
</script>

<div id="flashBox">
      <img src="http://www.jx573.com/Files/NewsFiles2/200810/2008102917030398977.jpg" />
      <img src="http://www.jx573.com/Files/NewsFiles2/200811/200811181021448159.jpg" />
      <img src="http://www.jx573.com/Files/NewsFiles2/200810/2008103112433473300.jpg" />
      <img src="http://www.jx573.com/Files/NewsFiles2/200811/2008110414250831677.jpg" />
      <!-- //这部份注释是生成的数字标签的代码，仅供设计CSS样式时方便参考，使用时请删除
      <ul>
            <li class="hover">1</li>
            <li>2</li>
      </ul>
      -->
</div>

<script type="text/javascript">
//<![CDATA[

//生成一个对象
new flashBoxCtrl("flashBox",1000);
//]]>
</script>

</body>
</html>

分享到：

仿豆瓣的风格改了个导航[js无框架版] | 网页设计者值得一去的地方

2008-11-27 17:31
浏览 817
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

幻灯程序更新v2.0

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

幻灯程序更新v2.0

评论

发表评论

相关推荐

JQuery限制复选框checkbox可选中个数

IE和Firefox兼容的iframe刷新

Firefox和IE之间7个JavaScript的差异

JS实用代码

jQuery.inArray注意事项

CKEditor配置使用

通过js读取或设置 FCKeditor中的值 js操作fckeditor

关于用CSS区分Firefox、IE6、IE7

js 动态创建select 并赋予onchange事件

javascript对话框(弹出层)组件artDialog

用JavaScript检查文件是否存在

JavaScript打印

JavaScript, AJAX树形控件大全(all kinds of TreeView Controls by JavaScript, AJAX)

javascript获取ul中li的个数

location.hash实现跨域iframe自适应

15个基于Web的HTML编辑器

父页面里两个iframe之间互相访问

JS压缩处理

常用的js正则表达式

模仿abcnews.com制作新闻(图片展示）

最近访客更多访客>>