<!--slide the picture-->
 var cursor=0;
 var step=1;
 var maxpicture=12;
 jQuery(document).ready(function(){
 	

	
 	if(jQuery("#pictures li").length>maxpicture){	
		$("#picControl #next, #picControl .separater").css("visibility","visible");	
			
		jQuery("#pictures li:gt("+(maxpicture-1)+")").hide();
	}

	cursor=0;	
  });
  
function privious(){
   var from=cursor-step;	   
   var to=from+maxpicture-1;	
   jQuery("#pictures li").show();
   jQuery("#pictures li:lt("+from+")").hide();
   jQuery("#pictures li:gt("+to+")").hide();
   cursor=from;
   achiveFront(from)	   
}
	
	function achiveFront(from){
		var picNum=jQuery("#pictures li").length;
		if(from<=0){
			$("#privious").css("visibility","hidden");
			cursor=0;
		}
		$("#next").css("visibility","visible")
	}
  function next(){
  	   var from=cursor+step;
	   var to=from+maxpicture-1;

	   jQuery("#pictures li").show();
  	   jQuery("#pictures li:lt("+from+")").hide();
	   jQuery("#pictures li:gt("+to+")").hide();
	   cursor=from;
	   achiveEnd(to);
	   
  }
  
  function achiveEnd(to){  
  	var picNum=jQuery("#pictures li").length;

  	if(to+1>=picNum){
  		$("#next").css("visibility","hidden");
	}
	$("#privious").css("visibility","visible")
  }
  
 function highLight(img, isInitial){
	 if(isInitial==null) isInitial=true;
	 
	var initBigimage=jQuery("#largeimage img:first").attr("src");
	
	 if( ((initBigimage||null) !=null) && isInitial ){
		 return;
	 }

	/** set highListh to current Picture**/
	jQuery("#pictures li img").removeClass('highLight');	
	img.addClass('highLight');
	/**privious the picture**/
	var small_src=img.attr("src");
	intercept_to=small_src.toLowerCase().indexOf('\.jpg');
	var big_src=small_src.substring(0,intercept_to)+"_big.jpg";
	jQuery("#largeimage img").attr("src",big_src);
}

<!--priview the picture-->
jQuery(document).ready(function(){

	highLight(jQuery("#pictures li img:first"));
	jQuery("#pictures li img").mouseover(function(){
			var img=jQuery(this);
			highLight(img,false);	
	});
});