slider

main.css

#billboard {
    width:100%;
    min-height: 700px;
    position:relative;
}

.slide {
    color:white;
    position:absolute;
    width:100%;
    text-align:center;
    font-size:3em;
}

#control {
    position:absolute;
    bottom:200px;
    left:0px;
}
#control > .swith {
    float:left;
    color:white;
    padding:10px;
    cursor:pointer;
}
#control > .swith:hover {
    background-color:red;
}

slider.html

    <div id='billboard'>
        <div class="slide">This is the first slide!</div>
        <div class="slide" style="display:none;">This is the second slide!</div>
        <div class="slide" style="display:none;">This is the third slide! </div>
        <div class="slide" style="display:none;">This is the last slide!</div>
        <div id="control">
            <div class="swith">1</div>
            <div class="swith">2</div>
            <div class="swith">3</div>
            <div class="swith">4</div>
        </div>
    </div>

slider.js

$(function(){

var a = new qq();

a.start();

//$('#billboard').hover(function(){
//    a.stop();
//},function(){
//    a.start();
//});
//

});

var qq = function(id, opt ) {
    this.qq(id, opt);
};

qq.prototype = {
  id:'#billboard',
  anim:'fade',
  speed:9000,
  slide:'.slide',
  delay:0,
  activeSlide:0,

  qq:function(id,opt){
      if(id) this.id = id;

      if(opt){
	if (opt.anim ) this.anim  = opt.anim;
    	if (opt.speed) this.speed = opt.speed;
    	if (opt.slide) this.slide = opt.slide;
      }

     this.slide = $(this.id + '>' + this.slide);
     if( this.slide.length <= 0 ) return false;
     this.slide.each(function(index){
	$(this).addClass('slide-'+index);
	if( index > 0 && $(this).has(':visible')) $(this).css({ display: "none" });
     });




  }, // end qq function
  prev:function(){
    if( this.activeSlide > 0 ) this.go(this.activeSlide-1)
    else this.go( this.slide.length - 1 );
  },
  next:function(){
    if( this.activeSlide < this.slide.length-1) this.go(this.activeSlide+1)
    else this.go(0)
  },
  go:function(n){
    $('.slide-'+this.activeSlide).hide();
    this.activeSlide = n;
    $('.slide-'+this.activeSlide).fadeIn();
  },
  stop:function(){
    clearInterval(this.loopTimer);
  },
  start:function(){
     var self = this;
     this.loopTimer = setInterval( function(){
	 self.next.apply(self); }, this.speed + this.delay );
  }

}; // end prototype



/* =========================================== */
function d(s) {
	if (console == null) return;

	if (console.dir)
		if (s instanceof Array)
		    console.dir(s)
		else
		    console.log(s);

	if (console.write) console.write(s);
}