轮播组件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 alt=""; 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"; } };

 

posted @ 2014-01-28 17:25  stephenykk  阅读(431)  评论(0编辑  收藏  举报