html代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prototype 测试</title>
<link rel="stylesheet" type="text/css" href="Styles/base/reset.css"/>
<link rel="stylesheet" type="text/css" href="Styles/base/base.css"/>
<script type="text/javascript" src="Scripts/prototype1.6.1.js"></script>
<script type="text/javascript" src="Scripts/effectPlus/scriptaculous.js"></script>
</head>
<body>
<div id="scroller">
<ul>
<li style="background:#9C6;" class="item"><a href="javascript:void(0);">1</a></li>
<li style="background:#675;" class="item"><a href="javascript:void(0);">2</a></li>
<li style="background:#7c3;" class="item"><a href="javascript:void(0);">3</a></li>
<li style="background:#89f;" class="item"><a href="javascript:void(0);">4</a></li>
<li style="background:#69e;" class="item"><a href="javascript:void(0);">5</a></li>
</ul>
<a href="#" id="scroller-last"><</a>
<a href="#" id="scroller-next">></a>
</div>
<div id="pointer"></div>
</body>
</html>
css code:
#scroller{display:block;width:500px; height:300px; background:#6CC; border:1px #ccc solid; overflow:hidden; position:relative;}
#scroller ul{float:none; text-align:left; position:absolute; left:0px; top:0px;}
#scroller .item{display:block;width:500px; height:300px; float:left; overflow:hidden;}
#scroller .item a{font-size:36px; color:red;}
#scroller-last{ font-size:24px; color:#000; position:absolute; left:0px; top:50%; cursor:pointer;}
#scroller-next{font-size:24px; color:#000; position:absolute; right:0px; top:50%; cursor:pointer;}
#pointer{text-align:center;width:500px;}
#pointer label{padding:5px; font-size:16px; color:#000; cursor:pointer;}
#pointer .pointer-cur{color:#F03; cursor:default;}
js代碼:
//scroller类
var Scroller=Class.create({
initialize:function(object){
var id=$(object.scrollerId);//滚动块id选择器元素
var lastBt=$(object.lastBt);//上一个按钮id
var nextBt=$(object.nextBt);//下一个按钮id
var pointerId=$(object.pointer);//指示点块id
var cur=object.pointerCur;//当前选中指示点的类
var pointerEvent=object.pointerEvent==undefined?'mouseover':object.pointerEvent;//指示点触发事件,默认为滑过
var autoPlay=object.autoPlay==undefined?true:object.autoPlay;//是否自动,默认自动
var interval=object.interval==undefined?3:object.interval;//滚动间隔时间,默认3秒
var speed=object.speed==undefined?0.7:object.speed;//滚动速度,默认0.7秒
var pe;//自动标志对象
var pointerArray;//指示点对象数组
//滚动个数
this.nums=id.down('ul').childElements().size();
//高宽
var w=id.down('ul').childElements()[0].getWidth();
var h=id.down('ul').childElements()[0].getHeight();
//设置ul的高宽
id.down('ul').setStyle({width:w*this.nums+'px',height:h+'px'});
//设置指示点
if(pointerId!=undefined){
for(var i=1; i<=this.nums; i++){
pointerId.insert(new Element('label'));
}
//如果没有设置背景图片则添加数字
if(pointerId.down('label').getStyle('backgroundImage')=='none'){
for(var i=0; i<this.nums; i++){
pointerId.down(i).update(i+1);
}
}
//为第一个label添加类cur
pointerId.down('label').addClassName(cur);
pointerArray=pointerId.childElements();//指示点对象数组
}
var lenght=this.nums;
var curNum=1;//当前号
//绑定左右按钮事件
if(nextBt!=undefined&&lastBt!=undefined){
nextBt.observe('click',function(event){
if(pe!=undefined) pe.stop();
if(curNum<lenght){
pointerId.down(curNum-1).removeClassName(cur);
pointerId.down(curNum).addClassName(cur);
id.down('ul').morph('left:-'+w*curNum+'px',{duration:speed});
++curNum;
if(curNum==lenght){
this.hide();
}
lastBt.show()
}
if(pe!=undefined) pe.resume();
//alert(pe);
});
lastBt.observe('click',function(event){
if(pe!=undefined) pe.stop();
if(curNum>1){
--curNum;
pointerId.down(curNum).removeClassName(cur);
pointerId.down(curNum-1).addClassName(cur);
id.down('ul').morph('left:-'+w*(curNum-1)+'px',{duration:speed});
if(curNum==1){
this.hide();
}
nextBt.show();
}
if(pe!=undefined) pe.resume();
});
}
//解决ie不兼容indexOf
if(!Array.indexOf){
Array.prototype.indexOf = function(obj){
for(var i=0; i<this.length; i++){
if(this[i]==obj){
return i;
}
}
return -1;
}
}
//指示点事件
if(pointerId!=undefined){
pointerArray.each(function(obj){
obj.observe(pointerEvent,function(event){
if(pe!=undefined) pe.stop();//停止自动滚
if(nextBt!=undefined&&lastBt!=undefined){
if(curNum==1) lastBt.show();
if(curNum==pointerArray.length) nextBt.show();
}
for(var j=0; j<pointerArray.length; j++){
if(pointerArray[j].hasClassName(cur)){
pointerArray[j].removeClassName(cur);
pointerArray[pointerArray.indexOf(obj)].addClassName(cur);
break;
}
}
id.down('ul').morph('left:-'+w*pointerArray.indexOf(obj)+'px',{duration:speed});
curNum=pointerArray.indexOf(obj)+1;
if(nextBt!=undefined&&lastBt!=undefined){
if(curNum==1) lastBt.hide();
if(curNum==pointerArray.length) nextBt.hide();
}
if(pe!=undefined) pe.resume();//回复自动滚
});
});
}
//自动滚动事件
PeriodicalExecuter.prototype.resume = function(){
if(!this.timer)
this.registerCallback();
};
if(autoPlay){
pe = new PeriodicalExecuter(function(){
if(nextBt!=undefined&&lastBt!=undefined){
lastBt.show();
nextBt.show();
}
if(pointerId!=undefined) pointerId.down(curNum-1).removeClassName(cur);
++curNum;
if(curNum>lenght) curNum=1;
id.down('ul').morph('left:-'+w*(curNum-1)+'px',{duration:speed});
if(pointerId!=undefined) pointerId.down(curNum-1).addClassName(cur);
}, interval);
}
// 如果要停止
//pe.stop();
// 停止后再重新启动
//pe.resume();
}
});
//实例化一个scroller
var scroller1=new Scroller({
scrollerId:'scroller',
lastBt:'scroller-last',
nextBt:'scroller-next',
pointer:'pointer',
pointerCur:'pointer-cur',
pointerEvent:'click',
autoPlay:true,
interval:3.5,
speed:0.7
});