マルチキャストコンポーネントice Slider
26616 ワード
~~~~ ， 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";
}
};