内有说明 书和例子
/* 小密蜂幻灯片类 v1.0 2008-07-16 请保留此注释,谢谢 ^_^
* Slider, version 1.0.0
* No(c) 2008 jusa wong <jusa.wong@gmail.com/3331137@qq.com>
/*--------------------------------------------------------------------------*/
var Slider=Class.create();
Slider.prototype={
initialize:function($element,$imgData,$buttonData,$options)
{
this.setOptions($options);
this.id='_'+String(Math.round(Math.random()*(9999-1))); //组件的随机Id
this.screen=$($element),this.screenSetStyle(); //获取容器,设置样式
this.slideDiv=this.createSlideDiv(this.screen); //创建幻灯片荧幕
if(this.options.isNeedButton) this.createButtonDiv(this.screen,$imgData.img.length-1,$imgData,$buttonData); //创建按钮
this.slideDiv.innerHTML=this.formatHtml($imgData.img[0],$imgData.url[0]); //导入第一个数据
this.counter=0,this.baby='1',this.virgin=true;
var oThis=this;
var browser=navigator.userAgent.toLowerCase();
this.isIE=(browser.indexOf("msie")!=-1) ? true:false;
if(this.options.autoPlay) this.timer=setTimeout(function(){oThis.open(oThis,$imgData,$buttonData)},this.options.interVal);
},
setOptions:function($options)
{
this.options={
autoPlay:true, //自动播放
isNeedButton:true, //是否需要按钮
isNeedLink:true, //是否需要链接
width:0, //手动配置宽
height:0, //手动配置高
buttonLeft:0, //手机配置按钮的靠左距离
buttonTop:0, //手机配置按钮的靠上距离
screenClassName:'screenStyle', //屏幕的配置,就是放置幻灯片的DOM元素了 -_-!
slideClassName:'slideStyleC', //幻灯片效果的样式名
slidePicClassName:'slidePicStyle', //幻灯片图片的样式名
interVal:4000, //间隔时间
path:'slideImage/', //幻灯片图片路径
buttonPanelClassName:'slideButtonDivStyle', //放置所有按钮的"DIV容器"的样式
buttonEachDivClassName:'slideButtonEachDivStyle', //每一个按钮"DIV容器"的样式
buttonEachPicClassName:'slideButtonEachPicStyle', //每个按钮图片的样式
buttonImgPath:'images/', //按钮图片路径 如果为空就幻灯片图片路径用
event:'onclick', //触发按钮的事件
excStyleValue:2 //在点击按钮切换图片时，想有效果切换就设置大于1的值,设置为0或其它值将无效果切换,默认为2
}.extend($options||{});
if(this.options.buttonImgPath==undefined||this.options.buttonImgPath=="") this.options.buttonImgPath=this.options.path;
if(this.options.event==undefined||this.options.even=='') this.options.event='onclick';
},
open:function($self,$imgData,$buttonData)
{
if($self.counter>($imgData.img.length-1)) $self.counter=0;
if($self.options.isNeedButton) $self.buttonController($self,$imgData,$buttonData);
$self.play($self,$imgData.img[($self.virgin==true) ? 1:$self.counter],$imgData.url[($self.virgin==true) ? 1:$self.counter]);
$self.counter+=1,$self.virgin=false;
$self.timer=setTimeout(function(){$self.open($self,$imgData,$buttonData)},$self.options.interVal);
},
screenSetStyle:function()
{
this.screen.className=this.options.screenClassName;
if(this.options.width!=0) this.screen.style.width=String(this.options.width)+'px';
if(this.options.height!=0) this.screen.style.height=String(this.options.height)+'px';
},
createSlideDiv:function($parentDiv) //创建幻灯片屏幕
{
var slideDiv=document.createElement('div');
slideDiv.id='slideDiv'+this.id,slideDiv.className=this.options.slideClassName;
if(this.options.width!=0) slideDiv.style.width=String(this.options.width)+'px';
if(this.options.height!=0) slideDiv.style.height=String(this.options.height)+'px';
$parentDiv.appendChild(slideDiv);
return slideDiv;
},
createButtonDiv:function($parentDiv,$buttonCount,$imgData,$buttonData) //创建幻灯片按钮
{
var buttonDiv=document.createElement('div');
buttonDiv.id='buttonDiv'+this.id,buttonDiv.className=this.options.buttonPanelClassName;
if(this.options.buttonLeft!=0) buttonDiv.style.left=String(this.options.buttonLeft)+'px';
if(this.options.buttonTop!=0) buttonDiv.style.top=String(this.options.buttonTop)+'px';
//makeHTML
var buttonHtml='';
for(var iButton=0;iButton<=$buttonCount;iButton++)
{
var imgButtonUrl=(iButton==0) ? this.options.buttonImgPath+$buttonData.excImg[iButton]:this.options.buttonImgPath+$buttonData.img[iButton];
var imgButton='<img id="sButton'+iButton+this.id+'" name="sButton'+iButton+this.id+'" src="'+imgButtonUrl+'" border="0" class="'+this.options.buttonEachPicClassName+'"/>';
var buttonLab='<div id="sButtonDiv'+iButton+this.id+'" class="'+this.options.buttonEachDivClassName+'">'+imgButton+'</div>';
buttonHtml+=buttonLab;
}
buttonDiv.innerHTML=buttonHtml,$parentDiv.appendChild(buttonDiv);
var oThis=this;
for(var iButton=0;iButton<=$buttonCount;iButton++)
{
eval('$(\'sButton'+String(iButton)+this.id+'\').'+this.options.event+'=function(){oThis.rup(oThis,$imgData,$buttonData,'+iButton+')}');
}
},
rup:function($self,$imgData,$buttonData,$orderId) //按钮点击时的响应者
{
if($self.options.autoPlay)
{
clearTimeout($self.timer);
$self.counter=Number($orderId);
$self.timer=setTimeout(function(){$self.open($self,$imgData,$buttonData)},$self.options.interVal);
}
var eventButton=$('sButton'+$orderId+this.id);
$self.play($self,$imgData.img[$orderId],$imgData.url[$orderId],'eventTransfer');
eventButton.src=$self.options.buttonImgPath+$buttonData.excImg[$orderId];
for(var iButton=0;iButton<=$buttonData.img.length-1;iButton++)
{
if($orderId!=iButton) $('sButton'+String(iButton)+this.id).src=$self.options.buttonImgPath+$buttonData.img[iButton];
}
},
play:function($self,$img,$url,$transfer) //幻灯机
{
if($self.isIE)
{
//revealTrans效果
if($self.slideDiv.filters[0])
{
if($self.slideDiv.filters.revealTrans!=undefined)
{
if($self.slideDiv.filters.revealTrans.Transition==23)
{
$self.slideDiv.filters.revealTrans.Transition=23;
}
}
var durationValue=2; //默认的自动切换值为2，当检查到调用为"事件调用"则会查找配置表中的配置进行覆盖
if($transfer=='eventTransfer') durationValue=($self.options.excStyleValue.constructor==Number&&$self.options.excStyleValue>0) ? $self.options.excStyleValue:0;
$self.slideDiv.filters[0].Apply();
$self.slideDiv.innerHTML=$self.formatHtml($img,$url);
$self.slideDiv.filters[0].Play(duration=durationValue);
}
else
{
$self.slideDiv.innerHTML=$self.formatHtml($img,$url);
}
}
else
{
$self.slideDiv.innerHTML=$self.formatHtml($img,$url);
}
},
buttonController:function($self,$imgData,$buttonData)
{
if($self.virgin)
{
$('sButton1'+$self.id).src=$self.options.buttonImgPath+$buttonData.excImg[1];
}
else
{
$('sButton'+String($self.counter)+$self.id).src=$self.options.buttonImgPath+$buttonData.excImg[$self.counter];
$self.baby=String($self.counter);
}
for(var iButton=0;iButton<=$buttonData.img.length-1;iButton++)
{
if('sButton'+String(iButton)+$self.id!='sButton'+$self.baby+$self.id)
$('sButton'+String(iButton)+$self.id).src=$self.options.buttonImgPath+$buttonData.img[iButton];
}
},
formatHtml:function($img,$url)
{
var $$imgStyle='style="';
if(this.options.width!=0) $$imgStyle+='width:'+this.options.width+'px;';
if(this.options.height!=0) $$imgStyle+='height:'+this.options.height+'px;';
$$imgStyle+='"';
var $$html='<a href="'+$url+'" target="_blank"><img src="'+this.options.path+$img+'" border="0" class="'+this.options.slidePicClassName+'" '+$$imgStyle+'/></a>';
if(!this.options.isNeedLink) $$html='<img src="'+this.options.path+$img+'" border="0" class="'+this.options.slidePicClassName+'" '+$$imgStyle+'/>';
return $$html;
}
};