Js焦点图

 
/**
 * CreateDate 2011-8-26 15:58:57
 *
 * Description of imgchanger
 *
 * @author tanyong
 */
////////////////////////////////////////////////////////////////////////
/**
 * 焦点图类,根据实际需求扩张修改
 * 该类严重依赖 Tjquery Object  Tjquery.js
 * @example
 * <script type="text/javascript" src="Tjquery.js"></script>
 *<script type="text/javascript" src="imgchanger.js"></script>
 * onloadReady(function (){
 *                               var image=["../Image1.jpg","../Image2.jpg","../Image3.gif"];
 *                               var title=[1,2,3];
 *                               imgchanger.reg("div", image, title, "200px", "100px", 3000, "imgs","span","div2");
 *                       });
 *   <div id="div1" style="width:202px;height:122px;border:orange 1px solid; position:absolute">
 *                       <div id="div" style="width:200px;height:100px;">
 *                               <div id="div2"></div>
 *                       </div>
 *                       <span id=this.numdiv style="width:200px; height:20px;border:orange 1px solid; background:#666666;"></span>
 *               </div>
 * @return void
 * @type object
 *
 */
var imgchanger={
        /**
 * 对象接口;构造函数
 * @param Element 图像的伏击点
 * @param image[Array] 图片路径 是一个数组
 * @param title 图片标题 是一个数组
 * @param width 图片宽
 * @param height 图片高
 * @param send 交互时间
 * @param id 图片的Id 属性 必须的
 * @param numdiv 显示标题的层
 * @param clonediv 克隆层 可选
 * @return void
 * @type function 
 */
        reg:function (Element,image,title,width,height,send,id,numdiv,clonediv){
                this.Element=Element;
                getid(Element).style.overflow="hidden";
                this.image=image;
                this.title=title;
                this.width=width;
                this.height=height;
                this.send=send;
                this.numdiv=numdiv;
                this.clonediv=clonediv;
                this.id=id;
                this.i=0;
                this.len=this.image.length;
                for(var j=0;j<this.len;j++){
                        this.Createimg(j);
                }
                this.num();
               // this.play();
                this.timer=null;
          
        },
        "num":function (){
                //Css(this.numdiv).top=getid("div1").offsetTop+"px";
                //Css(this.numdiv).top=getid("div1").offsetLeft+"px";
                Css(this.numdiv).top=(parseInt(Tjquery.imgNum(this.numdiv, this.Element)[1])+20)+"px";
                // setTimeout("imgchanger.num()",100)
               
        },
        "Createimg":function (i){
                var img=Tjquery.CreateElement("img")
                img.id=this.id;
                img.style.width=this.width;
                img.style.height=this.height;
                img.style.cssFloat="left"
                img.src=this.image[i];
                img.alt=this.title[i];
                img.title=this.title[i];
                Tjquery.appendChild(img, this.Element);
        },
        "play":function (){
  document.title=this.timer;
                getid(this.Element).scrollTop>=getid(this.Element).scrollHeight-getid(this.id).clientHeight?getid(this.Element).scrollTop=0:getid(this.Element).scrollTop+=parseInt(Math.round(getid(this.id).clientHeight/4));
                if(this.clonediv)Tjquery.setValue(this.clonediv,Tjquery.setValue(this.Element));
  getid("div").onmouseover=function (){
   //alert("")
   clearTimeout("this.timer");
   }
                if(getid(this.Element).scrollTop >=getid(this.id).clientHeight && getid(this.Element).scrollTop % getid(this.id).clientHeight==0){
                        Css(this.numdiv).display="block";
                        Tjquery.setAlpha(this.numdiv, 30)
                        this.i>=this.len-1?this.i=0:this.i+=1;
                        getid(this.numdiv).innerHTML=this.title[this.i]
                        Tjquery.setAlpha(this.Element,95)
                        this.timer=setTimeout("imgchanger.play()",this.send); //停顿的时间
                }else {
                        Tjquery.setAlpha(this.numdiv, 2)
                        Tjquery.setAlpha(this.Element,40)
                        this.timer=setTimeout("imgchanger.play()",parseInt(Math.round(this.send/10)/2)); //翻转的时间
                }
        }
 
}
            

Tjquery 类 下载  : 点击打开链接