幻灯程序更新v2.0

最新推荐文章于 2021-03-10 08:29:54 发布
goby2008
最新推荐文章于 2021-03-10 08:29:54 发布
阅读量83
点赞数
分类专栏： js 文章标签： JavaScript CSS IE XHTML J# ViewUI
本文链接：https://blog.csdn.net/goby2008/article/details/83319637
版权
js 专栏收录该内容
31 篇文章 0 订阅
订阅专栏
<!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].οnmοuseοver=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].οnmοuseοut=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>