轮播组件iceSlider

~~~~作为编写组件的一个参考吧，在js输出组件样式的问题上 探讨一下 尽量简化组件的调用

function iceSlider(element,options) {        
        /*
            功能：广告翻转切换控制  
            参数：
            w:(int) 广告的宽度
            h:(int) 广告的高度，默认为200px
            autoTime:(int)切换停留时间，默认为1500ms
            ad:(json) 为广告图片路径，链接，弹出目标等数据，如：ad:[{src:‘1.jpg‘,href:‘http://163.com‘,alt:‘banner1‘}
            src:(str)图片src路径
            href:(str)图片点击的链接
            alt:(str)图片alt描述
            up:(boolean) 滑动方向
            
            选项：
            
            prototype使用示例：
            <div class="productsBanner" id="idTransformView"></div>
            document.observe(‘dom:loaded‘,function()        //dom元素加载后执行
            {
                $(‘productsBanner‘).iceSlider({
                ad:[
                {src:‘1.jpg‘,href:‘http://www.baidu.com‘, target:‘_blank‘, alt:‘1.jpg‘},
                {src:‘2.jpg‘,href:‘http://www.baidu.com‘, target:‘_blank‘, alt:‘2.jpg‘},
                {src:‘3.jpg‘,href:‘http://www.baidu.com‘, target:‘_blank‘, alt:‘3.jpg‘}
                ]
                });
            });

            原生js调用示例：
            <div id="banner"></div>
            iceSlider(‘banner‘,{
                ad:[
                {src:‘1.jpg‘,href:‘http://www.baidu.com‘, target:‘_blank‘, alt:‘1.jpg‘},
                {src:‘2.jpg‘,href:‘http://www.baidu.com‘, target:‘_blank‘, alt:‘2.jpg‘},
                {src:‘3.jpg‘,href:‘http://www.baidu.com‘, target:‘_blank‘, alt:‘3.jpg‘}
                ],
                up:false
            });         
            
        */
        // 输出组件相关的样式 首先检测浏览器
        var _IE = (function(){
            var v=3, div = document.createElement(‘div‘), all = div.getElementsByTagName(‘i‘);
            while( div.innerHTML = ‘<!--[if gt IE ‘+ (++v) + ‘]> <i></i><![endif]-->‘, all[0]);
            return v>4?v:false;
        })(); 
        
        // ~~  判断$!==jQuery ~~可以基于Prototype 或 原生Js
        if(window.$){
            if(window.$ == jQuery){
                var $ = function(id){return typeof id ===‘string‘ ? document.getElementById(id) : id; }
            }
        }else{
            var $ = function(id){return typeof id ===‘string‘ ? document.getElementById(id) : id; }
        }

        /*--------- 获取参数 ---------*/
        var h,w;            //切换广告的高度宽度，默认为200
        var count;        //切换广告的数据，根据数据传入的数量自动设定
        var ad;
        var autoTime;
          if(options!=undefined){
         
             h=options.h;
              ad=options.ad;
            count=options.count || options.ad.length;
            autoTime=options.autoTime;
         }
         
         autoTime=autoTime||1000;
         h=h||200;
         w=options.w || 200;

         if(! window.sliderStyleStr){
            window.sliderStyleStr = ‘ul,li{list-style:none; margin:0; padding:0;}‘+
                (!options.up ?‘.iceSlider{width: ‘+count * w+‘px; height:‘+h+‘px} .iceSlider li{float:left;}‘:‘‘) +
                ‘.iceSlider li a{display:inline-block;}‘+
                ‘.iceSlider  li a img{border:0; width:‘+w+‘px; height:‘+h+‘px; margin-bottom:-3px; margin-bottom:0 \9;}‘+
                ‘.rotatorNumber{height:20px; position:absolute; right:5px; bottom:10px;}‘+
                ‘.rotatorNumber li{float:left; width:20px; height:100%; margin:0 5px; color:#333;  background:#fff; border:1px solid #aaa; text-align:center; cursor:default;}‘+
                ‘.rotatorNumber .on{border:1px solid hotpink;}‘;
            if(_IE){ document.createStyleSheet("javascript:sliderStyleStr"); 
            }else{
                var oStyle =document.createElement(‘style‘);
                oStyle.innerHTML = window.sliderStyleStr;
                document.getElementsByTagName(‘head‘)[0].appendChild(oStyle);
            }
        }
        
        /*----------- 生成html --------*/
        var li="";
        var li2="";
        var ;
        for(var i=0;i<ad.length;i++){
    
            var target=ad[i].target||‘_self‘;
            var href=ad[i].href||"javascript:void(0);";
            li+=‘<li><a href="‘+href+‘" target="‘+target+‘"><img src="‘+ad[i].src+‘" alt="‘+ad[i].alt+‘"/></a></li>‘;
            var cls="";
            if(i==0)cls=‘ class="on"‘;
            li2+=‘<li‘+cls+‘>‘+parseInt(i+1)+‘</li>‘;
            
        
        }
        
        var html=‘<div class="viewPort"><ul class="iceSlider" id="iceSlider">‘+li+‘</ul><ul class="rotatorNumber">‘+li2+‘</ul></div><span class="bannerTitle" id="bannerTitle"></span>‘;
         $(element).innerHTML=html;
         var _target=ad[0].target!=‘_blank‘?‘_self‘:‘_blank‘;
        //初始化标题
        $(‘bannerTitle‘).innerHTML=‘<a href="‘+ad[0].href+‘"  target="‘+_target+‘">‘+ad[0].alt+‘</a>‘;
        
        /*----------- 生成html end --------*/

        var element=$(element);    
        var viewPort = element.getElementsByTagName(‘div‘)[0]; //顶层容器 视口
        viewPort.style.height = h +‘px‘;
        viewPort.style.width = w +‘px‘;
        var count=$(‘iceSlider‘).getElementsByTagName(‘li‘).length; //内容页数
        var a=$(‘iceSlider‘).getElementsByTagName(‘a‘); //包裹图片的a
         
         function each(list, fun){//用于遍历的功能函数
          for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
         };
         
        // var objs = $(element).select(‘ul‘)[1].select("li");
        var objs = $(element).getElementsByTagName(‘ul‘)[1].getElementsByTagName("li"); //切换的数字
        //实例化轮播组件
        var tv = new TransformView(
             viewPort,
             $(element).getElementsByTagName(‘ul‘)[0], 
             h,
             count,
             {
              //当前切换数字 on
             Up:options.up,
             onStart : function(){ each(objs, function(o, i){ o.className = tv.Index == i ? "on" : "";   }) },
             Pause:autoTime
            }
        );
         
         tv.Start(); //播放
         
         each(objs, function(o, i){ //鼠标悬停 数字序号上 切换内容页
          o.onmouseover = function(){
           o.className = "on";
           tv.Auto = false;//暂停自动播放 设置索引 然后播放
           tv.Index = i;
           tv.Start();
           //切换到当前内容页的图片说明
           var _target=a[i].target!=‘_blank‘?‘_self‘:‘_blank‘;
           $(‘bannerTitle‘).innerHTML=‘<a href="‘+a[i].href+‘"  target="‘+_target+‘">‘+a[i].getElementsByTagName(‘img‘)[0].alt+‘</a>‘; 
          };
          o.onmouseout = function(){//鼠标从数字序号离开 恢复自动播放
           o.className = "";
           tv.Auto = true;
           tv.Start();
          }
         });
         
    } //lihuoSlider  end 

    
    var iceSliderClass = {
      create: function() {//通过执行create方法 返回构造函数
         return function() {
            this.$=(window.$ && window.$!=jQuery) ? window.$ : function(id){return typeof id ===‘string‘ ? document.getElementById(id) : id; } ;
            this.initialize.apply(this, arguments);//构造函数的参数直接传入初始化方法
            }
          }
    }
    
    Object.extend = function(destination, source) {//浅拷贝方式扩展对象
     for (var property in source) {
      destination[property] = source[property];
     }
     return destination;
    }
    
    var TransformView = iceSliderClass.create(); //create方法返回构造函数
    TransformView.prototype = {
      //容器对象,滑动对象,切换参数,切换数量,选项对象
      initialize: function(ViewPort, sliderCon, psize, count, options) {
         if(psize <= 0 || count <= 0) return;
         var oViewPort = this.$(ViewPort), oSliderCon = this.$(sliderCon), oThis = this; //this为轮播组件对象
        
         this.Index = 0;//当前索引
         
         this._timer = null;//定时器
         this._sliderCon = oSliderCon;//滑动对象
         this._psize = psize;//切换参数
         this._count = count || 0;//切换数量
         this._target = 0;//目标参数
         
         this.SetOptions(options);
         
         this.Up = !!this.options.Up;
         this.Step = Math.abs(this.options.Step); //步长
         this.Time = Math.abs(this.options.Time); 
         this.Auto = !!this.options.Auto; 
         this.Pause = Math.abs(this.options.Pause);
         this.onStart = this.options.onStart;
         this.onFinish = this.options.onFinish;
         
         oViewPort.style.overflow = "hidden"; //容器 相对定位 溢出隐藏
         oViewPort.style.position = "relative";
        
         oSliderCon.style.position = "absolute"; //内容 绝对定位在容器左上角
         oSliderCon.style.top = oSliderCon.style.left = 0;
        },
      //设置默认属性 
    
      SetOptions: function(options) {
         this.options = {//默认值
          Up:   true,//是否向上(否则向左)
          Step:  5,//滑动变化率
          Time:  10,//滑动延时
          Auto:  true,//是否自动转换
          Pause:  2000,//停顿时间(Auto为true时有效)
          onStart: function(){},//开始转换时执行
          onFinish: function(){}//完成转换时执行
         };
         Object.extend(this.options, options || {});
        },

      //开始切换设置
      Start: function() {
         if(this.Index < 0){//Index越界则修正
          this.Index = this._count - 1;
         } else if (this.Index >= this._count){ this.Index = 0; }
         
         this._target = -1 * this._psize * this.Index;
         this.onStart();
         this.Move();
        },

      //移动
      Move: function() { 
        //  var _img=this.$(‘ul.iceSlider‘)[0].select(‘img‘);
         clearTimeout(this._timer);
         var oThis = this, 
         style = this.Up ? "top" : "left", 
         iNow = parseInt(this._sliderCon.style[style]) || 0, 
         iStep = this.GetStep(this._target, iNow);//步长 非匀速的 剩余距离的1/5步进
         
         if (iStep != 0) {
          this._sliderCon.style[style] = (iNow + iStep) + "px";
          this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
         } else {//步长为0 表示到达终点 若为自动播放 则继续start()
          this._sliderCon.style[style] = this._target + "px";
          this.onFinish();
         
          if (this.Auto) { 
                  this._timer = setTimeout(function(){
                 oThis.Index++; 
                 oThis.Start();
                 var curA = oThis.$(‘iceSlider‘).getElementsByTagName(‘img‘)[oThis.Index].parentNode;
                 oThis.$(‘bannerTitle‘).innerHTML=‘<a href="‘+curA.href+‘" target="‘+curA.target+‘">‘+curA.getElementsByTagName(‘img‘)[0].alt+‘</a>‘; 
                }, this.Pause ); 
            }
         }
      },

      //获取步长
      GetStep: function(iTarget, iNow) {
         var iStep = (iTarget - iNow) / this.Step; //剩余距离1/5步长
         if (iStep == 0) return 0;
         if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1); //最小步长1px
         return iStep; //不一定能整除吧？iStep=1.5也可以?
        },

      //停止
      Stop: function(iTarget, iNow) {
         clearTimeout(this._timer);
         this._sliderCon.style[this.Up ? "top" : "left"] = this._target + "px";
        }
    };