프로토타입과scriptaculous에 기반한 윤방기 v1.0.0
<!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
});이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기능 재검토(프로토타입 아님) 🤥빠른 수정을 위한 몇 가지 참고 사항 사용자 지정 속성이 있는 함수 이것은 대부분의 경우 런타임 바인딩이므로 someKey는 aFunction 또는 aFunction.prototype의 속성이 아닙니다. 접두사 cu...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
