<div id="example">
<div id="slides">
<div class="slides_container">
<div style="width: 781px; height: 270px; background: #fff;" alt="Slide 1">1111</div>
<div style="width: 781px; height: 270px; background: #fff056;" alt="Slide 2">2222</div>
<div style="width: 781px; height: 270px; background: #56ff56;" alt="Slide 3">3333</div>
<div style="width: 781px; height: 270px; background: #56fff1;" alt="Slide 4">4444</div>
</div>
</div>
</div>

(function($){$.fn.slides=function(option){option=$.extend({},$.fn.slides.option,option);return this.each(function(){$('.'+option.container,$(this)).children().wrapAll('<div class="slides_control"/>');var elem=$(this),control=$('.slides_control',elem),total=control.children().size(),width=control.children().outerWidth(),height=control.children   ().outerHeight(),start=option.start-1,effect=option.effect.indexOf(',')<0?option.effect:option.effect.replace(' ','').split(',')[0],paginationEffect=option.effect.indexOf(',')<0?effect:option.effect.replace(' ','').split(',')[1],next=0,prev=0,number=0,current=0,loaded,active,clicked,position,direction;if(total<2){return;}
if(start<0){start=0;};if(start>total){start=total-1;};if(option.start){current=start;};if(option.randomize){control.randomize();}
$('.'+option.container,elem).css({overflow:'hidden',position:'relative'};);control.css({position:'relative',width:(width*3),height:height,left:-width};);control.children().css({position:'absolute',top:0,left:width,zIndex:0,display:'none'};);if(option.autoHeight){control.animate({height:control.children(':eq('+start+')').outerHeight()},option.autoHeightSpeed);}
if(option.preload&&control.children()[0].tagName=='IMG'){elem.css({background:'url('+option.preloadImage+') no-repeat 50% 50%'};);var img=$('img:eq('+start+')',elem).attr('src')+'?'+(new Date()).getTime();$('img:eq('+start+')',elem).attr('src',img).load(function(){$(this).fadeIn(option.fadeSpeed,function(){$(this).css({zIndex:5};);elem.css({background:''};);loaded=true;};);};);}else{control.children(':eq('+start+')').fadeIn(option.fadeSpeed,function(){loaded=true;};);}
if(option.bigTarget){control.children().css({cursor:'pointer'};);control.children().click(function(){animate('next',effect);return false;};);}
if(option.hoverPause&&option.play){control.children().bind('mouseover',function(){stop();};);control.children().bind('mouseleave',function(){pause();};);}
if(option.generateNextPrev){$('.'+option.container,elem).after('<a href="#" class="'+option.prev+'">Prev</a>');$('.'+option.prev,elem).after('<a href="#" class="'+option.next+'">Next</a>');}
$('.'+option.next,elem).click(function(e){e.preventDefault();if(option.play){pause();};animate('next',effect);};);$('.'+option.prev,elem).click(function(e){e.preventDefault();if(option.play){pause();};animate('prev',effect);};);if(option.generatePagination){elem.append('<ul class='+option.paginationClass+'></ul>');control.children().each(function(){$('.'+option.paginationClass,elem).append('<li><a href="#'+number+'">'+(number+1)+'</a></li>');number++;};);}else{$('.'+option.paginationClass+' li a',elem).each(function(){$(this).attr('href','#'+number);number++;};);}
$('.'+option.paginationClass+' li:eq('+start+')',elem).addClass('current');$('.'+option.paginationClass+' li a',elem).click(function(){if(option.play){pause();};clicked=$(this).attr('href').match('[^#/]+$');if(current!=clicked){animate('pagination',paginationEffect,clicked);}
return false;};);$('a.link',elem).click(function(){if(option.play){pause();};clicked=$(this).attr('href').match('[^#/]+$')-1;if(current!=clicked){animate('pagination',paginationEffect,clicked);}
return false;};);if(option.play){playInterval=setInterval(function(){animate('next',effect);},option.play);elem.data('interval',playInterval);};function stop(){clearInterval(elem.data('interval'));};function pause(){if(option.pause){clearTimeout(elem.data('pause'));clearInterval(elem.data('interval'));pauseTimeout=setTimeout(function(){clearTimeout(elem.data('pause'));playInterval=setInterval(function(){animate("next",effect);},option.play);elem.data('interval',playInterval);},option.pause);elem.data('pause',pauseTimeout);}else{stop();}};function animate(direction,effect,clicked){if(!active&&loaded){active=true;switch(direction){case'next':prev=current;next=current+1;next=total===next?0:next;position=width*2;direction=-width*2;current=next;break;case'prev':prev=current;next=current-1;next=next===-1?total-1:next;position=0;direction=0;current=next;break;case'pagination':next=parseInt(clicked,10);prev=$('.'+option.paginationClass+' li.current a',elem).attr('href').match('[^#/]+$');if(next>prev){position=width*2;direction=-width*2;}else{position=0;direction=0;}
current=next;break;}
if(effect==='fade'){option.animationStart();if(option.crossfade){control.children(':eq('+next+')',elem).css({zIndex:10};).fadeIn(option.fadeSpeed,function(){control.children(':eq('+prev +')',elem).css({display:'none',zIndex:0};);$(this).css({zIndex:0};);option.animationComplete(next+1);active=false;};);}else{option.animationStart();control.children(':eq('+prev+')',elem).fadeOut(option.fadeSpeed,function(){if(option.autoHeight){control.animate({height:control.children(':   eq('+next+')',elem).outerHeight()},option.autoHeightSpeed,function(){control.children(':eq('+next+')',elem).fadeIn(option.fadeSpeed);};);}else{control.children(':eq('+next+')',elem).fadeIn(option.fadeSpeed,function(){if($.browser.msie){$(this).get(0).style.removeAttribute('fil   ter');}};);}
option.animationComplete(next+1);active=false;};);}}else{control.children(':eq('+next+')').css({left:position,display:'block'};);if(option.autoHeight){option.animationStart();control.animate({left:direction,height:control.children(':eq('+next+')').outerHeight()},option.slideSpeed,function(){control.css({left:-widt   h};);control.children(':eq('+next+')').css({left:width,zIndex:5};);control.children(':eq('+prev+')').css({left:width,display:'none',zIndex:0};);option.animationComplete(next+1);active=false;};);}else{option.animationStart();control.animate({left:direction},option.slideSpeed,function(){control.css({left:-width};);control.children(':eq('+next+')').css({left:width,zIndex:5};);control.children(':eq('+prev+')').css({left:width,display:'none',zIndex:0};);option.animationComplete(next+1);active=false;};);}}
if(option.pagination){$('.'+option.paginationClass+' li.current',elem).removeClass('current');$('.'+option.paginationClass+' li:eq('+next+')',elem).addClass('current');}}};};);};$.fn.slides.option={preload:false,preloadImage:'/img/loading.gif',container:'slides_container',generateNextPrev:false,next:'next',prev:'prev',pagination:true,generatePagination:true,paginationC   lass:'pagination',fadeSpeed:350,slideSpeed:350,start:1,effect:'slide',crossfade:false,randomize:false,play:0,pause:0,hoverPause:false,autoHe   ight:false,autoHeightSpeed:350,bigTarget:false,animationStart:function(){},animationComplete:function(){}};$.fn.randomize=function(callback){function randomizeOrder(){return(Math.round(Math.random())-0.5);}
return($(this).each(function(){var $this=$(this);var $children=$this.children();var childCount=$children.length;if(childCount>1){$children.hide();var indices=[];for(i=0;i<childCount;i++){indices[indices.length]=i;}
indices=indices.sort(randomizeOrder);$.each(indices,function(j,k){var $child=$children.eq(k);var $clone=$child.clone(true);$clone.show().appendTo($this);if(callback!==undefined){callback($child,$clone);}
$child.remove();};);}};));};};)jQuery);

#container {
width:580px;
padding:10px;
margin:0 auto;
position:relative;
z-index:0;
}

#example {
width:100%;
height:350px;
position:relative;
}

#slides {
position:absolute;
width:781px;
top:32px;
left:-16px;
z-index:3;
}

.slides_container {
width:781px;
height:270px;
overflow:hidden;
position:relative;
}

.pagination {
position: absolute;
margin: 0px;
padding: 0px;
width:100%;
height:32px;
top: -32px;
left: 0px;
}

.pagination li {
float:left;
list-style-type: none;
}

.pagination li a {
float:left;
text-align:center;
text-decoration:none;
display:block;
cursor: pointer;
width: 194.5px;
height: 30px;
line-height: 30px;
list-style-type: none;
font: bold 12px/32px Arial, sans-serif;
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
-pie-background: none;
background: #e5e5e5;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #c9c9c9;
border-left: 1px solid #d6d6d6;
position: relative;
}

.pagination li:first-child a {border-left: none;}

.pagination li.current a {
background-position:0 -12px;
}