Mere end 3 til slide

'Ello

Har et script som har et slideshow ligende effekt, men den kan kun vise 3 billeder/tekst, og jeg ønsker gerne, at den vise flere end det, derfor søger jeg jeres hjælp her på udvikleren

HTML-kode

<div class="spotlight" id="idSlideshow">
 <ul class="slider" id="idSlider">
  <li class="banner1">
   <a href="#">gfhgf</a>
  </li>
  <li class="banner2">
   <a href="#">sd</a>
  </li>
  <li class="banner3">
   <a href="#">sddddd</a>
  </li>
  <li class="banner4">
   <a href="#">et456</a>
  </li>
 </ul>
</div>
<div id="top_select">
 <ul class="selector" id="idSelector">
  <li>
   <div class="button1">sd</div>
  </li>
  <li>
   <div class="button2">dd</div>
  </li>
  <li>
   <div class="button3">ee</div>
  </li>
  <li>
   <div class="button4">ff</div>
  </li>
 </ul>
</div>

JavaScript-kode:

var slideshow = new Class(
	{
		Implements:
			Options,options:
			{
				up:true,
				step:5,
				time:10,
				auto:true,
				pause:5000,
				onStart:function(){},
				onFinish:function(){}
			},
		
		initialize:
			function(a,b,d,e,f)
			{
				if(d<=0||e<=0)
				{
					return
				}
				
				var c=$(a),s=$(b);
				
				this.index=0;
				this._timer=null;
				this._slider=s;
				this._parameter=d;
				this._count=e||0;
				this._target=0;
				this.setOptions(f);
				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;
				
				c.style.overflow="hidden";
				c.style.position="relative";
				s.style.position="absolute";
				s.style.top=s.style.left=0
			},
		
		start:
			function()
			{
				if(this.index<0)
				{
					this.index=this._count-1
				}

				else if(this.index>=this._count)
				{
					this.index=0
				}

				this._target=-1*this._parameter*this.index;this.onStart();
				this.move()
			},

		move:
			function()
			{
				$clear(this._timer);
				var a=this,style=this.up?"top":"left",_now=parseInt(this._slider.style[style],10)||0,_step=this.getStep(this._target,_now);
				
				if(_step!==0)
				{
					this._slider.style[style]=(_now+_step)+"px";
					this._timer=setTimeout(
						
						function()
						{
							a.move()
						},
						
						this.time
					)
				}

				else
				{
					this._slider.style[style]=this._target+"px";
					this.onFinish();
					
					if(this.auto)
					{
						this._timer=setTimeout(
						
							function()
							{
								a.index++;a.start()
							},
							
							this.pause
						)
					}
				}
			},

		getStep:
			function(a,b)
			{
				var c=(a-b)/this.step;
				
				if(c===0)
				{
					return 0
				}
				
				if(Math.abs(c)<1)
				{
					return(c>0?1:-1)
				}
				
				return c
			},
		
		stop:
			function(a,b)
			{
				$clear(this._timer);
				
				this._slider.style[this.up?"top":"left"]=this._target+"px"
			}
	}
);

document.addEvent('domready',

	function()
	{
		var a=$('idSelector').getElements('li');
		var b=new slideshow("idSlideshow","idSlider",236,3,
			{
				onStart:function()
				{
					$each(
						a,function(o,i)
						{
							o.className=b.index==i?"on":""
						}
					)
				}
			}
		);
		
		b.start();
		
		$each(
			a,function(o,i)
			{
				o.onmouseover=function()
				{
					o.className="on";
					b.auto=false;
					b.index=i;
					b.start()
				};
				
				o.onmouseout=function()
				{
					o.className="";
					b.auto=true;
					b.start()
				}
			}
		)
	}
);

PS. Der bliver anvendt MooTools